不是全宽 css 水平菜单

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 水平菜单

Not full width css horizontal menu

css

menu