Question

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

我试过添加一个边距：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;
}

Answer 1

使用.category-nav和text-indent添加margin-left样式，并将.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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何在无序列表中缩进包裹的行？

2 个答案: