奇怪的填充/列表设计中的间距
问题描述:
我一直在设计三个链接跨设备的宽度在手机上。我无法弄清楚为什么我无法获得正确的间距。什么看起来?奇怪的填充/列表设计中的间距
这里是我的CSS:
.b-nav-Wrapper {
width: 100%;
}
.b-nav {margin: 0 auto;}
.b-nav ul {
list-style: none;
}
.b-nav ul li{
display: inline-block;
width: 33.33%;
}
.b-nav ul li a{
text-decoration: none;
color: rgb(151,151,151);
}
.navNumber {
float: left;
width: 20%;
font-family: "korolev-condensed",sans-serif;
font-size: 2.5875em;
opacity: .50;
}
.navLink {
float: right;
width: 65%;
padding-top: 4px;
font-family: "mrs-eaves-xl-serif",sans-serif;
font-size: 1.2em;
line-height: 1em;
font-style: italic;
font-weight: 500;
}
*编辑:这是我的HTML:
<nav class="b-nav-Wrapper cf">
<div class="b-nav">
<ul>
<li class="active">
<a href="#">
<p class="navNumber active">01</p>
<p class="navLink active">Now Reading</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">02</p>
<p class="navLink">Browse My Books</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">03</p>
<p class="navLink">Notes & Quotes</p>
</a>
</li>
</ul>
</div>
</nav>
答
你没有把你的html,这让我们猜测它。但如果.b-nav ul li
被称为编号部分,则应该尝试width
小于33.33%。因为其他元素的1px margin
或padding
会导致它分成两行。如果它没有解决,把你的链接或HTML。
对不起。编辑为显示本节的HTML。 –
@ChristopherDavis我刚刚在jsfiddle.net上对它进行了检查,你只需要做出这样的改变:'.b-nav ul li {width:32%;显示:inline-block; }' – ata
完美。谢谢! –