所以我试图在网站点击某个媒体查询时保持无序列表居中。如果页面移动,我无法让它留在它的容器的中心。这是相应的代码。
HTML
<div id="centerNav">
<ul id="home-nav">
<li><a href="/practice-areas/dui-defense/">DUI/DWI Defense</a></li>
<li><a href="/practice-areas/criminal-defense/">Criminal Defense</a></li>
<li><a href="/practice-areas/estate-planning/">Estate Planning</a></li>
<li style="border: none;"><a href="/practice-areas/agricultural-law/"> Agricultural Law</a></li>
</ul>
</div>
CSS
@media only screen and (max-width: 839px)
{
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
}
#home-nav li {
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
width: 158px;
border-right: 1px solid #fff;
margin-top: 8px;
line-height: 1em;
padding-left: 10px;
}
#home-nav {
list-style:none;
position:relative;
height: 60px;
vertical-align: middle;
z-index: 5;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
border: none;
margin: 0;
background: #7a0426;
}
}
答案 0 :(得分:3)
从li中删除float
并将其设为display: inline-block
我认为这将解决您的问题。
<强> CSS 强>
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
text-align:center;
}
#home-nav li {
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
line-height: 60px;
padding:0 10px;
}
答案 1 :(得分:0)
在媒体查询中,您需要确保float为none,因为您从之前的css
设置了浮点数#home-nav li {
float: none;
display: inline-block;
}
包含li的无序列表,添加text-align:center
#home-nav {
text-align: center;
}
此外,您的html结构目前无效,因为您有一个div作为ul的直接子项。如果需要,你可以使用div包装ul,但它绝对不应该是现在的方式
那应该解决问题