首页 文章

Zurb Foundation：如何在DIV中居中ul菜单列表

提问于
浏览 次
2

我一直很难尝试在div的中心放置无序的内联元素 .

我需要帮助才能做到这一点 .

<div class="column">
<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">For Sale</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Vehicles</a></li>
  <li><a href="#">Classes</a></li>
  <li><a href="#">Real Estate</a></li>
  <li><a href="#">Sevices</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Personals</a></li>
  <li><a href="#">Jobs</a></li>
 </ul>
</div>

另一种方法没有用 . 通过采用浮动中心规则

  • 出售

  • 项目1A

</ul>
  </li>
  <li><a href="#">Vehicles</a></li>
  <li><a href="#">Classes</a></li>
  <li><a href="#">Real Estate</a></li>
  <li><a href="#">Sevices</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Personals</a></li>
  <li><a href="#">Jobs</a></li>
 </ul>
</div>

使用原始html / css时，将ul元素移动到DIV的中心会更容易 . 当我添加zurb基础标签/规则时，菜单项移动到DIV的左侧 . 我已经尝试了所有方法来使这些居中，但我不能 . 有任何想法吗？谢谢

html zurb-foundation center inline

2 回答

  • 0

    您的情况的问题是ul元素具有值为block的显示属性 . 这会导致ul的宽度与父级的div一样大 .

    您可以向ul元素添加一个类，该类将 display 属性更改为 inline-block ，并将 text-center 类添加到父div以使内容居中 .

    这是一个指向codepen http://codepen.io/MKallivokas/pen/ONbYYV的链接：

    HTML:

    <div class="column text-center">
<ul class="dropdown menu custom-menu" data-dropdown-menu>
  <li>
    <a href="#">For Sale</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Vehicles</a></li>
  <li><a href="#">Classes</a></li>
  <li><a href="#">Real Estate</a></li>
  <li><a href="#">Sevices</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Personals</a></li>
  <li><a href="#">Jobs</a></li>
 </ul>
</div>

    CSS:

    .custom-menu {
    display: inline-block;
}
    回复于
  • 2

    你可以使用 .text-center class或 margin: 0 auto;

    回复于

相关问题