空间<li>均匀？

时间：2016-12-21 08:56:58

标签： html css

我有OCD，需要修复以下内容（导航栏中单词的间距）。

body {
  width: 100%;
  background-color: #e6e6e6;
  font-family: Miramonte;
  margin: auto;
}
.navContainer {
  height: 30px;
  width: 100%;
  margin: auto;
  padding-top: 30px;
}
nav {
  width: 100%;
  max-width: 400px;
  background-color: #333;
  padding: 0;
  margin: 1em auto;
  overflow: visible;
  height: 30px;
}
nav ul {
  overflow: visible;
  height: 30px;
  margin: 0;
  padding: 0;
}
nav ul li {
  text-align: center;
  overflow: visible;
  height: 30px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  width: 20%;
  max-width: 80px;
  display: block;
}
a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  overflow: visible;
  line-height: 30px;
  display: block;
  position: relative;
}
a:hover {
  color: #e6e6e6;
}
a img {
  width: 90%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  position: absolute;
  bottom: -30px;
  right: 5%;
  left: 5%;
}
<div class="navContainer">
  <nav>
    <ul>
      <li><a href="art.html"> art </a>
      </li>
      <li><a href="download.html"> download </a>
      </li>
      <li>
        <a href="home.html">
          <img src="image/symbol.png">
        </a>
      </li>
      <li><a href="portfolio.html"> portfolio </a>
      </li>
      <li><a href="product.html"> product </a>
      </li>
    </ul>
  </nav>
</div>

我所需要的只是将图像均匀分布，图像中间的图像仍然完好无损，如图所示。

请注意艺术这个词与右侧相比如何不均匀分布？

我是第一个说我正在建立自己的网站的人，我不熟悉CSS / HTML脚本。

感谢帮助，

感谢。

4 个答案:

答案 0 :(得分：0)

从display: block CSS选择器中删除nav ul li和display: flex;，然后添加

flex-flow: row wrap; justify-content: space-between; nav ul

到body { width: 100%; background-color: #e6e6e6; font-family: Miramonte; margin: auto; } .navContainer { height: 30px; width: 100%; margin: auto; padding-top: 30px; } nav { width: 100%; max-width: 400px; background-color: #333; padding: 0; margin: 1em auto; overflow: visible; height: 30px; } nav ul { overflow: visible; height: 30px; margin: 0; padding: 0; display: flex; flex-flow: row wrap; justify-content: space-around; } nav ul li { text-align: center; overflow: visible; height: 30px; margin: 0; padding: 0; list-style-type: none; // float: left; width: 20%; max-width: 80px; // display: block; flex: 1; } a { text-decoration: none; margin: 0; padding: 0; color: #d9d9d9; overflow: visible; line-height: 30px; display: block; position: relative; } a:hover { color: #e6e6e6; } a img { width: 90%; margin: 0; padding: 0; vertical-align: baseline; position: absolute; bottom: -30px; right: 5%; left: 5%; } CSS选择器会将显示从块更改为灵活框，允许文本在整个元素中更均匀地分布

＆＃13;
＆＃13; 
<body>
  <div class="navContainer">
    <nav>
      <ul>
        <li><a href="art.html">&nbsp;&nbsp;&nbsp; art &nbsp;&nbsp;&nbsp; </a>
        </li>
        <li><a href="download.html"> download </a>
        </li>
        <li>
          <a href="home.html">
            <img src="image/symbol.png">
          </a>
        </li>
        <li><a href="portfolio.html"> portfolio </a>
        </li>
        <li><a href="product.html"> product </a>
        </li>
      </ul>
    </nav>
  </div>
</body>
＆＃13; 
&nbsp;
＆＃13;
＆＃13;
＆＃13;

修改

我在链接中的单词art周围添加了一些&nbsp;字符，以便为其提供一些与其他链接相似的间距。

var script = document.createElement('script'); script.src = //path of 2.JS file; script.type = "text/javascript"; script.onload = function () { showLogin();// }; 是如何在HTML中创建空格

的

答案 1 :(得分：0)

使用display: table / table-cell作为列表/列表项。

body {
  width: 100%;
  background-color: #e6e6e6;
  font-family: Miramonte;
  margin: auto;
}

.navContainer {
  height: 30px;
  width: 100%;
  margin: auto;
  padding-top: 30px;
}

nav {
  width: 100%;
  list-style: none;
  max-width: 400px;
  background-color: #333;
  padding: 0;
  margin: 1em auto;
  overflow: visible;
  height: 30px;
}

  nav ul:before {
    display: table;
    content: " ";
  }

  nav ul {
    overflow: visible;
    height: 30px;
    margin: 0;
    padding: 0;
  }

    nav ul li {
      text-align: center;
      overflow: visible;
      height: 30px;
      margin: 0;
      padding: 0;
      list-style-type: none;
      float: none;
      width: 1%;
      max-width: 80px;
      display: table-cell;
      position: relative;
    }

a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  overflow: visible;
  line-height: 30px;
  display: block;
  position: relative;
}

  a:hover {
    color: #e6e6e6;
  }

  a img {
    width: 90%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    position: absolute;
    bottom: -30px;
    right: 5%;
    left: 5%;
  }

答案 2 :(得分：0)

这样的东西（略微改变了标记）？

＆＃13;
＆＃13; 
body {
  width: 100%;
  background-color: #e6e6e6;
  font-family: Miramonte;
  margin: auto;
}
.navContainer {
  height: 30px;
  width: 100%;
  margin: auto;
  padding-top: 30px;
}
nav {
  width: 100%;
  max-width: 400px;
  background-color: #333;
  padding: 0;
  margin: 1em auto;
  display: flex;
  height: 30px;
}
nav ul {
  display: flex;
  height: 30px;
  margin: 0;
  padding: 0;
}
nav ul:nth-child(1), nav ul:nth-child(3) {
  flex: 1;
  justify-content: space-between;
}
nav ul:nth-child(1)::before, nav ul:nth-child(3)::before,
nav ul:nth-child(1)::after, nav ul:nth-child(3)::after{
  content: '';
}
nav ul:nth-child(2) {
  width: 18%;
}
nav ul li {
  text-align: center;
  overflow: visible;
  height: 30px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-width: 80px;
  display: block;
}
nav ul:nth-child(2) li {
   width: 100%;
}
a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  overflow: visible;
  line-height: 30px;
  display: block;
  position: relative;
}
a:hover {
  color: #e6e6e6;
}
a img {
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  position: absolute;
  bottom: -30px;
  left: 0%;
}
＆＃13; 
<div class="navContainer">
  <nav>
    <ul>
      <li><a href="art.html"> art </a></li>
      <li><a href="download.html"> download </a></li>
    </ul>
    <ul>
      <li><a href="home.html"><img src="http://www.pd4pic.com/images/eye-black-fan-symbol-design-sun-flower-circle.png"></a></li>
    </ul>
    <ul>
      <li><a href="portfolio.html"> portfolio </a></li>
      <li><a href="product.html"> product </a></li>
    </ul>
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

试试这个，只需根据您的要求更改nav百分比即可。另外，为了获得更准确的结果，您可以添加媒体查询。

body {
  width: 100%;
  background-color: #e6e6e6;
  font-family: Miramonte;
  margin: auto;
}

.navContainer {
  height: 30px;
  width: 100%;
  margin: auto;
  padding-top: 30px;
}

nav {
  width: 100%;
  list-style: none;
  max-width: 75%;
  background-color: #333;
  padding: 0;
  margin: 1em auto;
  overflow: visible;
  height: 30px;
}

nav ul:before {
  display: table;
  content: " ";
}

nav ul {
  overflow: visible;
  height: 30px;
  margin: 0;
  padding: 0;
}

nav ul li {
  text-align: center;
  overflow: visible;
  height: 30px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: none;
  width: 1%;
  max-width: 80px;
  display: table-cell;
  position: relative;
}

a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  overflow: visible;
  line-height: 30px;
  display: block;
  position: relative;
}

a:hover {
  color: #e6e6e6;
}

a img {
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  position: absolute;
  bottom: -30px;
  right: 0;
  left: 0;
}
<body>
  <div class="navContainer">
    <nav>
      <ul>
        <li><a href="art.html">&nbsp;&nbsp;&nbsp; art &nbsp;&nbsp;&nbsp; </a>
        </li>
        <li><a href="download.html"> download </a>
        </li>
        <li>
          <a href="home.html">
            <img src="image/symbol.png">
          </a>
        </li>
        <li><a href="portfolio.html"> portfolio </a>
        </li>
        <li><a href="product.html"> product </a>
        </li>
      </ul>
    </nav>
  </div>
</body>

相关问题
最新问题