Question

仍在学习CSS ...

我刚遇到一个大问题。

我的导航栏当前已被压缩。我不确定如何将文本彼此隔开以使其变宽，从而占用更多空间。

我尝试使用以下内容（与我的帖子类似）：

justify-content: space-between

但这没用。

最后，（如果我知道该怎么做，（只是想学习的随机技巧）。我如何将徽标的两侧分开以左右推开？例如。

徽标左侧的所有内容均从左侧屏幕的边缘显示，反之亦然。但是徽标保留在中间。并且所有文本保持水平。

body {
  margin: 0;
  padding: 0;
  font-family: "Arial", serif;
}

img{
  height: 30px;
}

.nav {
  background-color: rgb(235, 235, 235);
  list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;

}

.nav li{
  list-style: none;
  display: inline-block;

}

.nav a{
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="styling.css" type="text/css">


  </head>
  <body>



<div class="nav">
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Products</a></li>
  <li><img src="logo.png"></li>

  <li><a href="/">Services</a></li>
  <li><a href="/">News</a></li>
  <li><a href="/">Contact</a></li>
</ul>
</div>





  </body>

<script src="app.js" charset="utf-8"></script>

</html>

Answer 1

要使用justify-content，需要首先在父元素上设置display: flex。我还建议在重置justify-content: space-between的默认左填充以获取均匀间距时，不要使用justify-content: space-around，而应使用<ul>。或者，在使用justify-content: space-between时将右填充设置为相等的值。

为了使徽标占用更多空间并将菜单项“推入”侧面，只需将徽标的<li>设置为50％的宽度，其余部分将由flex版式处理。我为该元素添加了一个“徽标”类。

更新：关于使菜单项水平居中，可以通过在flex容器上使用align-items: center来实现。

Update2 ：我还添加了一个示例，将徽标宽度设置为100％，并将元素之间的边距设置为10px，将项目推到尽可能远的侧面菜单栏本身有15px的填充。

body {
  margin: 0;
  padding: 0;
  font-family: "Arial", serif;
}

img{
  height: 30px;
}

.nav {
  background-color: rgb(235, 235, 235);
  list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;

}

.nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
}

.nav li{
  list-style: none;
  display: inline-block;
}

.nav2 .logo {
  width: 50%;
}

.nav3 {
  padding: 15px;
}

.nav3 .logo {
  width: 100%;
}

.nav3 li {
  margin-left: 10px;
}

.nav3 li:first-child {
  margin-left: 0px;
}

.nav4 ul {
  align-items: center;
}

.nav a{
  text-decoration: none;
}

<div class="nav">
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Products</a></li>
  
  <li class="logo"><img src="logo.png"></li>

  <li><a href="/">Services</a></li>
  <li><a href="/">News</a></li>
  <li><a href="/">Contact</a></li>
</ul>
</div>
<p>Pushing the menu items aside:</p>
<div class="nav nav2">
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Products</a></li>
  
  <li class="logo"><img src="logo.png"></li>

  <li><a href="/">Services</a></li>
  <li><a href="/">News</a></li>
  <li><a href="/">Contact</a></li>
</ul>
</div>
<p>Pushing the items as far aside as possible, with a fixed-width spacing:</p>
<div class="nav nav3">
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Products</a></li>
  
  <li class="logo"><img src="logo.png"></li>

  <li><a href="/">Services</a></li>
  <li><a href="/">News</a></li>
  <li><a href="/">Contact</a></li>
</ul>
</div>
<p>Nav items centered horizontally:</p>
<div class="nav nav4">
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Products</a></li>
  
  <li class="logo"><img src="logo.png"></li>

  <li><a href="/">Services</a></li>
  <li><a href="/">News</a></li>
  <li><a href="/">Contact</a></li>
</ul>
</div>

Answer 2

在这种情况下，.nav ul被设置为带有display：flex;的flex容器。我没有在周围使用空格，而是在徽标中添加了一个类，并将flex属性设置为1（flex：1）。这会将左右导航项分开，徽标展开以占据剩余空间。

.nav li项目已经过填充，因此不会被挤压在一起。

body {
  margin: 0;
  padding: 0;
  font-family: "Arial", serif;
}

img{
  height: 30px;
}

.nav {
  background-color: rgb(235, 235, 235);
  list-style: none;
  text-align: center;
  padding: 20px;
}
.nav ul {
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
}
.nav li{
  list-style: none;
  display: inline-block;
  padding:0 10px;
}
.logo {
  flex:1;
}

.nav a{
  text-decoration: none;
}

<div class="nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Products</a></li>
    <li class='logo'><img src="logo.png"></li>

    <li><a href="/">Services</a></li>
    <li><a href="/">News</a></li>
    <li><a href="/">Contact</a></li>
    </ul>
  </ul>
</div>

如何“扩展导航栏内容？”

2 个答案: