0
私はulを中心に私のヘッダーを取得しようとしています。別のページにはoverflow:hiddenが表示されていましたが、ウィンドウを縮小すると、2番目のスクロールバーが表示されます。私は自分のヘッダーを真ん中に置くことができません
私が何かを試すたびに、liは私のロゴに沿っていません。 また、クラス 'container' margin: autoを取得しようとしましたが、何も起こりません。
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global styling */
.container {
width: 100%;
overflow: visible;
}
ul {
margin: 0;
padding: 0;
}
/*Header*/
header {
background: #100806;
color: #f2f2f2;
min-height: 75px;
border-bottom: #ffffff 3px solid;
text-align: center;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
display: inline-block;
padding: 0 30px 10px 0;
float: left;
}
header .center-logo img {
width: 100px;
padding-left: 30px;
padding-right: 30px;
}
header nav span {
float: left;
}
header nav span:first-child {
padding-right: 50px;
/* half the logo width */
padding-top: 20px;
}
header nav span:last-child {
padding-left: 50px;
padding-top: 20px;
/* half the logo width */
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #666666;
font-weight: bold;
}<header>
<div class="container">
<nav>
<ul>
<span>
<li class="current"><a href="homePage.html"> Home</a></li>
<li><a href="about.html"> Photography</a></li>
</span>
<div class="center-logo">
<li><img src="https://placehold.it/100x50"></li>
</div>
<span>
<li><a href="services.html"> Biography</a></li>
<li><a href="contactus.html"> Contact Us</a></li>
</span>
</ul>
</nav>
</div>
</header>