我在标题上有一个菜单和一个 Logo ,我正在努力使 Logo 位于网站左侧的最边缘,而菜单位于右侧边缘。
问题是,当它们都显示为内联 block 时,这意味着它们将 float 到左侧的默认方向,我想不出改变它的方法,请帮忙。
这是 CSS 代码:
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
width: 100%;
padding: 15px 0px;
z-index: 1000;
}
.content{
width: 1000px;
max-width: 100%;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
/*Main Menu*/
.header-menu{
width: 690px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
#MainMenu li{
position: relative;
padding: 15px;
display: inline-block;
right: 0px;
}
注意: 在 html 中, Logo 在一个部分中,菜单在另一个部分中,并且它们都在分隔线内。
HTML代码:
<header>
<div class="wrapperHeader">
<div class="content">
<section class="header-logo">
<a href="index.html"><img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/></a>
</section>
<section class="header-menu">
<nav id="MainMenu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li id="PortfolioMenu"><a id="Portfolio" href="#">Portfolio</a>
<ul class="subMenu">
<li><a href="web-design.html">Web Design</a></li>
<li><a href="visual-identity.html">Visual Identity</a></li>
<li><a href="photography.html">Photography</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Get In Touch</a></li>
<li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
</ul>
<a href="#" id="SmartMenu">Menu<p id="SmartMenu-logo">LOAI Design Studio</p></a>
</nav>
</section>
</div>
</div>
</header>
最佳答案
我在这里编辑了你的 CSS 代码,所以你可以试试这个
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
padding: 15px 0px;
z-index: 1000;
overflow: hidden;
}
.content{
width: 1000px;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
float: left;
}
/*Main Menu*/
.header-menu{
width: 690px;
float: right;
}
#MainMenu ul{
margin: 0;
padding: 0;
list-style: none;
}
#MainMenu li{
position: relative;
padding: 5px 15px;
float: left;
list-style: none;
}
li#PortfolioMenu{
padding: 0;
}
li#PortfolioMenu > a{
padding: 5px 15px;
}
ul.subMenu{
display: none;
position: absolute;
}
li:hover ul.subMenu{
display: block;
}
我使用 float:left; 作为 Logo ,float:right; 作为标题菜单,删除了 display:inline-block; 并做了一些其他修复 ...
希望这对你有帮助...
关于css - 当它向左浮动时定位到右边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17249943/