在响应水平导航中垂直对齐多行文字

尝试在响应水平列表中垂直对齐多行文字（链接）。我的导航的高度是固定的。在响应水平导航中垂直对齐多行文字

我的标记重组就是这样的。你可以看到，所有的链接均匀分布的宽度，如果容器变小了，第三个链接项会运行多行，我怎么还能得到它垂直对齐？

.list { 
 
    font-family: arial; 
 
    background: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 

 
.list-item { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.list-item a { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-size: 12px; 
 
    background: blue; 
 
    padding: 0 15px; 
 
    line-height: 48px; 
 
    min-height: 48px; 
 
    max-height: 48px; 
 
} 
 

 
.list-item a:hover { 
 
    background: red; 
 
}

<ul class="list"> 
 
    <li class="list-item"><a href="">one</a></li> 
 
    <li class="list-item"><a href="">two</a></li> 
 
    <li class="list-item"><a href="">three three three</a></li> 
 
    <li class="list-item"><a href="">four</a></li> 
 
    <li class="list-item"><a href="">five</a></li> 
 
</ul>

来源

2017-03-09 calebo

你想拥有的情况下第三链接将在同一行？比你必须使用像空白：NOWRAP，如果你想显示在各行“树”行，你需要

.list-item { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    background: blue; 
} 

.list-item:hover { 
    background: red; 
} 

.list-item a { 
    box-sizing: border-box; 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    font-size: 12px; 
    background: blue; 
    padding: 0 15px; 
    /* line-height: 48px; */ 
    /* min-height: 48px; */ 
    max-height: 48px; 
    height: 100%; 
}

来源

2017-03-09 14:06:39 Nesquik27

这里的几乎没有你想要什么的解决方案。唯一的缺点：实际链接区域（在这里您可以点击）不跨越列表元素的整个高度（但整个宽度）：

编辑：评论后添加a:focus到最后的规则选择

.list { 
 
    font-family: arial; 
 
    background: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
.list-item { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    background: blue; 
 
    height: 48px; 
 
} 
 
.list-item a { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-size: 12px; 
 
    padding: 0 15px; 
 
    line-height: 14px; 
 
    width: 100%; 
 
} 
 
.list-item:hover, a:focus { 
 
    background: red; 
 
}

<ul class="list"> 
 
    <li class="list-item"><a href="">one</a></li> 
 
    <li class="list-item"><a href="">two</a></li> 
 
    <li class="list-item"><a href="">three three three</a></li> 
 
    <li class="list-item"><a href="">four</a></li> 
 
    <li class="list-item"><a href="">five</a></li> 
 
</ul>

来源

2017-03-10 01:35:32 Johannes

我有一个类似的解决方案为好，不幸的是没有希望的，因为我想保持悬停，注重与链接项目互动，甚至与互动键盘时。 – calebo

我在评论后添加了'a：focus'到最后的规则选择器。尽管这只强调了焦点上的'a'部分，但它仍然清晰可见。 – Johannes

在响应水平导航中垂直对齐多行文字

回答

相关问题