Question

我想手动缩小菜单项之间的水平空间，这样我就可以在不增加菜单栏宽度的情况下添加其他链接。

以下是菜单栏的图片：

这是我的CSS代码：

＆＃13;

#menu li{
	
	text-decoration: none;
	float: left;
	display: block;
	width: 150px;
	height: 60px;
	text-align: center;
	line-height: 55px;
	font-family: Tahoma,san-serif;
	font-size: 17px;
	margin: 0px;
	
}

＆＃13;

Answer 1

依靠line-height和padding代替height和width。试试这个：

#menu li {
    text-decoration: none;
    float: left;
    display: block;
    text-align: center;
    line-height: 1.5;
    font-family: Tahoma,san-serif;
    font-size: 17px;
    margin: 0;
    padding: 20px 15px;
}

Answer 2

删除width或从li提供自动并提供padding。因此，如果您的菜单文字有更多特征，它将很有效。

#menu li {
    display: block;
    float: left;
    font-family: Tahoma,san-serif;
    font-size: 17px;
    height: 60px;
    line-height: 55px;
    margin: 0;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    width: auto;
}

<强> Working Fiddle

Answer 3

将宽度更改为自动，以使宽度为单词的大小

#menu li{
   width: auto;
}

或更改宽度的实际尺寸

 #menu li{
   width: 120px;
}

然后添加填充padding:0 5px;

Answer 4

为什么不取消li的宽度/尺寸并使用其中的锚元素来设置它们的样式（添加填充，边框等）？

我假设您的布局类似于以下内容：

ul#menu {
  list-style-type: none;
  background-color: red;
  }
ul#menu li {
  display: inline-block;
  box-sizing: border-box;
 }
ul#menu li a {
  padding: 10px 20px;
  display: block;
  background-color: #fff;
  border: 1px solid #000;
  }

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">FAQ's</a></li>
  <li><a href="#">Contact</a></li>
</ul>

使用上述格式意味着您可以更轻松地控制外部li（例如ul#menu li { margin-left: 5px; }）之间的边距，而不必担心会破坏菜单项/链接本身的样式。 / p>

Answer 5

缩小li的宽度。有时候人们想要li的固定宽度，但是好的做法是使用padding。尝试以全宽度预览片段。

＆＃13;

ul li{
	
	text-decoration: none;
	float: left;
	display: block;
	width: 120px;
	height: 60px;
	text-align: center;
	line-height: 55px;
	font-family: Tahoma,san-serif;
	font-size: 17px;
	margin: 0px;
    background: gray;
    border-right:1px solid #fff;
	
}
ul li:last-child{
	
	
    border-right:0px;
	
}

＆＃13;

<ul>
  <li>Home</li>
  <li>About Us</li>
  <li>Services</li>
  <li>Technology</li>
  <li>Contact</li>
  <li>new</li>
  <li>new</li>
</ul>

＆＃13;

Answer 6

试试这个。

#menu{ float:left; background:black; width:100%}

#menu li{
	text-decoration: none;
	float: left;
	display: block;
	max-width: 150px;
	height: 60px;
	text-align: center;
	line-height: 55px;
	font-family: Tahoma,san-serif;
	font-size: 17px;
	margin: 0px;
	width:100%;
	background:red;
	border-right:1px solid green;
}

<ul id="menu">
	<li>Home</li>
    <li>About Us</li>
    <li>Blog</li>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
</ul>

这也是解决问题的方法。

如何减少菜单项[Home，About Us，...]之间的水平空间是CSS？

6 个答案: