html - 导航显示 :table cell where first and last child is a different width

Question

我有一个“步骤”导航，它使用表格/表格单元格来确保每个元素的宽度相同并占据整个菜单容器。但由于它的设计方式，我希望第一个和最后一个 child 的内容与 parent 的边缘对齐。有任何想法吗？也许我以错误的方式接近它......

用代码更容易解​​释:

http://jsfiddle.net/davidpauljunior/u499gyvd/

HTML:

<ul>
    <li>
        <span class="title">Item 1</span>
        <span class="fa fa-automobile"></span>
    </li>
    <li>
        <span class="title">Item 1</span>
        <span class="fa fa-automobile"></span>
    </li>
    <li>
        <span class="title">Item 1</span>
        <span class="fa fa-automobile"></span>
    </li>
    <li>
        <span class="title">Item 1</span>
        <span class="fa fa-automobile"></span>
    </li>
</ul>

CSS:

body {
    margin: 0;
}

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    display: table-cell;
    width: 100%;
    text-align: center;
    position: relative;
}

li:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: gray;
    position: relative;
    top: -10px;
}

li:first-child:after {
    width: 50%;
    left: 50%;
}

li:last-child:after {
    width: 50%;
}

.title {
    display: block;
    margin-bottom: 10px;
}

.fa {
    position: relative;
    z-index: 1;
}

.fa:before {
    padding: 4px;
    background: white;
    border: 1px solid gray;
    border-radius: 50%;
}

---

编辑:

我基本上追求的是第一个和最后一个元素具有 width: auto(因此它们仅与实际内容一样宽)，然后是介于两者之间的元素(例如 2， 3, 4) 将剩余的空间平分。

Answer 1

删除这2个样式；

li:first-child:after {
    left: 50%;
    width: 50%;
}
li:last-child:after {
    width: 50%;
}

如果您需要第一项和最后一项接触 ul 的左侧和右侧，则不需要它们。

然后您需要将第一项设置为 text-align: left;和文本对齐的正确元素:正确； (而不是像现在这样居中对齐)