时间戳

首页 > 解决方案 > 如何“更广泛地传播导航栏内容？”

html - 如何“更广泛地传播导航栏内容？”

问题描述

还在学习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>

标签： htmlcss

解决方案

为了使用justify-content，您需要先设置display: flex父元素。我还建议不要使用justify-content: space-between，但justify-content: space-around同时重置默认的左填充<ul>以获得均匀的间距。或者，在使用justify-content: space-between.

为了让 logo 占据更多空间并且菜单项被“推”到两侧，只需将 logo 设置为<li>50% 宽度，flex 布局将处理其余部分。为了实现这一点，我向元素添加了一个类“logo”。

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

更新 2：我还在一个示例中添加了一个示例，通过将徽标宽度设置为 100%，元素之间的边距为 10 像素，以及菜单栏本身的 15 像素填充，将项目尽可能地推向两侧。

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>

推荐阅读