Question

我已经在左边的导航菜单中使用以下HTML和CSS代码，一年中的大部分时间没有问题 - 除了display: block功能不起作用ul li a。无论我做什么，文本都被推到一条线上，只留下前面的箭头。

在ul li上没问题，但让链接本身延伸到整个区块会更实际。

有人对解决方案有所了解吗？

HTML：

<div class="navmenu_left_wrapper">
<nav>
<div class="navmenu_left">
  <ul>
    <li><a href="index.php">Front page</a></li>
    <li><a href="intro.php">Introduction</a></li>
  </ul>
</div> 
</nav>
</div>

CSS：

.navmenu_left_wrapper {
padding-bottom: 1px;
background-color: #DDD;
text-align: left;
overflow: visible;
width: 145px;
text-align: left;
} 

.navmenu_left {
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
font-size: 12px;        
font-family: 'oswald-regular', 'Times New Roman';
border: 1px dotted #000;
} 

.navmenu_left ul {
margin: 0;
padding: 0;
display: block; 
}

.navmenu_left ul li:before {
content: "\00BB \0020";
padding-right: 2px;
}

.navmenu_left ul li {
position: relative;
margin: 0;
padding-left: 4px;
list-style: none;
background: #F2F2F2;
text-align: left;               
text-decoration: none;          
height: 18px;       
}

.navmenu_left ul li:hover {
background: #CCCCFF;            
}

.navmenu_left ul li a {
color: #000;                    
width: 135px;
display: block; /* <----- Doesn't work. Text to next line, underneath "before" arrow. -------- */
}

Answer 1

我认为您希望display: inline-block正如其他人在评论中所述。问题是你的a太宽了135px而且容器溢出了。空格将导致它默认换行。

您可以缩小a的宽度，也可以将white-space: nowrap;添加到.navmenu_left ul li CSS

white-space属性 - https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

小提琴 - http://jsfiddle.net/msj5wcgw/3/

如果它通过overflow: ellipsis

溢出，您甚至可以将其设置为显示省略号

如果你想要＆gt;＆gt;要点击，您可以将此黑客添加到.navmenu_left ul li a：

padding-left: 1rem;
margin-left: -1rem;

Answer 2

问题解决了。它是两种设置的组合：

.navmenu_left ul li a {
color: #000;                    
width: 128px;          /* ">>" symbol is not part of the overall   width of the <li> element. */
display: inline-block; /* that explains also why `inline-block` is needed and not just `block`.
}

＆＃34; ul li：之前＆＃34;和＆＃34;显示：块＆＃34;组合 - 文字推送到下一行

2 个答案: