html - "ul li:before"和 "display:block"组合 - 文本被推到下一行

Question

在一年的大部分时间里，我一直在为左侧的导航菜单使用以下 HTML 和 CSS 代码，没有出现任何问题 - 除了 display: block 功能不起作用在 ul li a 上。无论我做什么，文本都会被推下一行，只有之前的箭头留在原处。

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

有人知道解决方案吗？

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

fiddle - http://jsfiddle.net/msj5wcgw/3/

您甚至可以通过 overflow: ellipsis

将其设置为在溢出时显示省略号

如果您希望 >> 可点击，您可以将此 hack 添加到 .navmenu_left ul li a:

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