Question

我想设置菜单中包含的每个标签右边框的大小，或强制边框显示菜单的整个垂直长度。

<div id="menu">
    <ul>
        <li><a class="lien_menu">
                <br>Onglet0 loooooooog</a></li>
        <li><a class="lien_menu">
                <br>Onglet1</a></li>
    </ul>
</div>

提前致谢。

Answer 1

 #menu ul li {
     display: table-cell;
     padding: 0px 12px 0px 12px;
     border-right: 1px solid #278fac;
     text-shadow: 0 1px 1px #278FAC;
     height: inherit;
     text-align: center;
     max-width: 100px;
 }

使用display: table-cell;可以在这里工作：）

Answer 2

您可以将高度属性添加到#menu ul li（例如height：60px;）

#menu ul li {
  display: inline-block;
  padding: 0px 12px 0px 12px;
  border-right: 1px solid #278fac;
  text-shadow: 0 1px 1px #278FAC;
  text-align: center;
  max-width: 100px;
  height: 60px;
}

Answer 3

这很简单，在

上设置高度

#menu ul

和

#menu ul li

到100％。由于#menu具有固定的高度，li将继承该高度并伸展以适应，如果间距过大，您可能需要调整#menu高度。

Answer 4

尝试使用CSS3功能：display: flex

http://jsfiddle.net/5FP8R/9/

#menu {
  width: 100%;
  background: -moz-linear-gradient(top, #C20017, #C20017); 
  margin-bottom: 10px;
  border: 0px solid red;
}

#menu ul {
  padding: 7px 10px 5px 10px;
  margin: 0px;
  border: 0px solid green;
  display: flex; /* this is flex-container */
  height: 70px; /* control height here */ 
  flex-flow: row nowrap;
  align-items: stretch; /* stretch items' height to container */
  justify-content: center; /* horizontal align to center */
}

#menu ul li {
  padding: 0px 12px 0px 12px;
  border-right: 1px solid #278fac;
  text-shadow: 0 1px 1px #278FAC;
  text-align: center;
  max-width: 100px;
  list-style: none; /* remove list style */
}

a.lien_menu {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

设置长度右边界

4 个答案: