Question

构建css水平菜单，我将填充和内联块元素应用于链接本身，以便可以单击整个块而不仅仅是链接文本。通常我浮动我的UL嵌套菜单，但事件如果我浮动这个列表它仍然垂直堆叠，我怀疑是由于内联块。我宁愿不使用float，因为我看到的几个例子表明这可以做到，但我没有运气获得内联块或平板来处理我的CSS。

实施例： http://jsfiddle.net/n4fkb66L/

HTML

  <div id="navigation">
    <ul>
      <li><a href="#"> Link 1 </a></li>
      <li><a href="#"> Link 2 </a></li>
      <li><a href="#"> Link 3 </a></li>
    </ul>
  </div>

CSS

html {
  position: relative;
  min-height: 100%;
  width: 100%;
  background-color: #F9F5EA;
  color: #333;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}

body {
  margin: 0 0 6.25em;
}

#navigation {
  height: 6.25em;
  background-color: #212121;
  color: #fff;
  text-align: center;
  -webkit-box-shadow: 0 8px 6px -6px #333;
     -moz-box-shadow: 0 8px 6px -6px #333;
          box-shadow: 0 8px 6px -6px #333;
}

#navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#naviation ul li {
}

#navigation ul li a {
  display: inline-block;
  vertical-align: top;
  height: 6.25em;
  width: 10em;
  line-height: 6.25em;
  text-decoration: none;
  color: #fff;
  transition: .3s background-color;
}

#navigation ul li a:hover {
  background-color: #DE5842;
}

#navigation ul li a:active {
  background-color: #6CBDF2;
  cursor: default;
}

Answer 1

通过在display:inline-block上添加<li>来解决？

#navigation li{
     display: inline-block;   
}

这是一个fiddle。

说明：即使您的元素位于display:inline-block，<li>仍然占据整行，因此不会为下一个<li>元素留出空间并强制它转到下一个元素线。

CSS inline-block li元素没有水平对齐

1 个答案: