ヘッダーにメニューとロゴがあり、ロゴをウェブサイトの左側の端に、メニューを右側の端に配置するのに苦労しています。
問題は、それらの両方がインライン ブロックとして表示されている場合、つまり左のデフォルトの向きにフロートすることです。これを変更する方法がわかりません。助けてください。
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 では、ロゴはセクションにあり、メニューは別のセクションにあり、両方とも分割内にあります。
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>