【发布时间】：2015-10-23 16:20:05
【问题描述】：
我希望能够在无序列表中缩进换行的文本。下面的第一张图片是我现在得到的，第二张是我真正想要的。
我尝试添加一个 margin-left: 56px;到标题连同文本缩进：-56px；但这产生了一些非常疯狂的结果。
你可以看看这个小提琴来玩代码。 https://jsfiddle.net/twestfall/n2Ln9hfp/
HTML：
<header class="l-index-header">
<ul class="category-nav">
<li> <a href="http://test2.spinneybeck.com/index.php?/architectural-products">All</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/belting-leather-wall-tiles">Belting Leather + Wall Tiles</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/handrails">Handrails</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/magnetic-backed-leather">Magnetic Backed Leather</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/pulls">Pulls</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/rugs">Rugs</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/floor-tiles" class="is-current">Floor Tiles</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/screens">Screens</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/wall-panels">Wall Panels</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/custom">Custom</a>
</li>
</ul>
</header>
CSS：
.l-index-header {
*zoom: 1;
max-width: 50.5em;
padding-left: 0;
padding-right: 0;
margin-right: auto;
}
.category-nav li {
display: inline-block;
}
.category-nav a {
font-family: HelveticaNeueLT-Medium, Helvetica, Arial, sans-serif;
font-size: 13px;
font-size: 1.3rem;
line-height: 1.5;
color: #acadaf;
text-decoration: none;
padding: 0 0.8em;
display: inline-block;
-webkit-font-smoothing: antialiased;
}
.category-nav li:first-of-type a {
border-right: 1px solid #929496;
padding-right: 1.2em;
margin-right: 0.2em;
}
.category-nav a:hover {
color: #2f292a;
background-color: #e6e7e8;
}
.category-nav a.is-current {
color: #2F292A;
}
【问题讨论】：
-
CSS 无法“检测”换行。您可能想要查看媒体查询并在不同的断点调整特定的边距。
-
简单的解决方案是把
All放在单独的容器中
标签： javascript jquery html css word-wrap