Question

我有一个有趣的方法：我正在测试方法，以使导航栏的列表项元素在导航栏的长度上均匀分布。我使用了display：table和display：table cell方法来获得最均匀的传播，这似乎工作正常。

当我去添加一个:: after元素以便我可以添加一个顶栏并且具有更平滑的悬停效果时，我发现该栏延伸到了我想要的位置 - 我试图拥有它直到“通信设计”这个词的结尾。所以我想我只是调整导航容器的大小，保存我的list-elements，但因为它是一个表/表格单元格，当导航器调整大小时，列表项目随之闪烁，我永远无法支撑最后一个元素。列表。

有没有办法影响最后一个表格单元格的大小或只显示:: after元素的百分比？

代码：

HTML：

<h3>Test & Co.</h3>
<p id="title2">Communications Design</p>

<div id="navContainer">
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Work</li>
    <li>Contact</li>
</ul>
</div>

CSS：

*
{
padding: 0;
margin: 0;
}

h3
{
padding-left: 140px;
display: inline-block;
padding-top: 10px;
padding-bottom: 25px;
}

#title2
{
display: inline-block;
float: right;
font-size: 16px;
margin-right: 252.5px;
padding-top: 14px;
padding-bottom: 25px;
}

#navContainer
{
//border: 1px solid black;
width: 643px;
margin-left: 140px;
height: 30px;
background: white;
}

#navContainer ul
{
list-style:none;
display: table;
width: 100%;
}

#navContainer ul li
{
display: table-cell;
height: 30px;
line-height: 30px;
font-family:arial;
font-size: 12px;
text-align: left;
//border: 1px solid black;
transition: color .2s ease-in-out;
position: relative;
}

#navContainer ul li::after
{
content: "";
display: block;
float: right;
position: absolute;
margin: auto;
height: 1px;
top: 0;
width: 100%;
background: #ccc;
transition: background-color .2s ease;
}

#navContainer ul li:hover::after
{
background: #8c8c8c; 
}

#navContainer ul li:hover
{
color: #A6CFEB;
}

Border-top延伸太远

0 个答案: