如何在无序列表中缩进换行？

Question

我希望能够在无序列表中缩进换行的文本。下面的第一张图片是我现在得到的，第二张是我真正想要的。

我试过添加 margin-left: 56px; header 连同 text-indent: -56px;但这有一些非常疯狂的结果。

您可以查看此 fiddle 来玩转代码。 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;
}

Answer 1

用text-indent和margin-left添加.category-nav样式并将.category-nav a的显示类型设置为span。 text-indent是继承的，所以子元素加上text-indent: 0;。

.l-index-header {
    *zoom: 1;
    max-width: 50.5em;
    padding-left: 0;
    padding-right: 0;
    margin-right: auto;
}
.category-nav {
    text-indent: -4.7em;
    margin-left: 1.7em;
}
.category-nav li {
    display: inline-block;
    text-indent: 0;
}
.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: span;
    -webkit-font-smoothing: antialiased;
    text-indent: 0;
}
.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;
}

<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>

Answer 2

另一个解决方案是只添加这些样式：

.category-nav {
    margin-left: 1.7em;
}
.category-nav li:first-child {
    margin-left: -4.7em;
}

.l-index-header {
    *zoom: 1;
    max-width: 50.5em;
    padding-left: 0;
    padding-right: 0;
    margin-right: auto;
}
.category-nav {
    margin-left: 1.7em;
}
.category-nav li:first-child {
    margin-left: -4.7em;
}
.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;
}

<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>

如何在无序列表中缩进换行？

How can I indent wrapped lines in an unordered list?

html

javascript

css

jquery

word-wrap