Question

相对较新的CSS，所以请忍受我的经验不足。我正在尝试创建一个菜单，经过大量的搜索和比较以及阅读和复制之后，我主要想出了我想要的格式。问题是我希望我的菜单是其内容的宽度，而不是全宽，下面的代码（改编自各种示例）产生一个全宽度菜单。我玩过各种各样的东西，但似乎无法确定是什么原因使它成为宽度 - 可能是我想要的东西需要更大量的重写。

如果它有帮助，我想要的是一个带有外部矩形边框的水平菜单，宽度由其内容决定，而不是自动全宽（甚至不是自动指定的宽度）。

这是我第一次在这里发帖提问，所以提前感谢您的帮助和耐心！

<style type="text/css">

*/#menu ul,#menu li,#menu a{
    list-style:none;
    margin:0;
    padding:0;
    border:0;
    font-family: Arial}

#menu{
    border:1px solid #000000;
    border-radius:5px}

#menu ul{
    background:#ffffff;
    padding:5px 10px;
    border-radius:5px}

#menu ul:before{
    content:'';
    display:block}

#menu ul:after{
    content:'';
    display:block;
    clear:both}

#menu li{
    float:left;
    margin:0px 0px 0px 0px;
    border:0px}

#menu li a{
    border-radius:5px;
    padding:5px 10px 5px;
    display:block;
    text-decoration:none;
    text-align:center;
    color:#000000;
    border:0px;
    font-size:15px}

</style>

<div id="menu">
    <ul>
        <li><a href="#"><span>Link1</span></a></li>
        <li><a href="#"><span>Link2</span></a></li>
        <li><a href="#"><span>Link3</span></a></li>
        <li><a href="#"><span>Link4</span></a></li>
    </ul>
</div>

Answer 1

ul 块级元素默认为100％宽。

将ul显示为inline-block，它将折叠到其内容的宽度。

根据需要将text-align添加到父级。我在这里使用了center。

#menu ul,
#menu li,
#menu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Arial
}
#menu {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
}
#menu ul {
  display: inline-block;
  background: lightblue;
  padding: 5px 10px;
  border-radius: 5px
}
#menu ul:before {
  content: '';
  display: block
}
#menu ul:after {
  content: '';
  display: block;
  clear: both
}
#menu li {
  float: left;
  margin: 0px 0px 0px 0px;
  border: 0px
}
#menu li a {
  border-radius: 5px;
  padding: 5px 10px 5px;
  display: block;
  text-decoration: none;
  text-align: center;
  color: #000000;
  border: 0px;
  font-size: 15px
}

<div id="menu">
  <ul>
    <li><a href="#"><span>Link1</span></a>
    </li>
    <li><a href="#"><span>Link2</span></a>
    </li>
    <li><a href="#"><span>Link3</span></a>
    </li>
    <li><a href="#"><span>Link4</span></a>
    </li>
  </ul>
</div>

不是全宽度css水平菜单

1 个答案: