css 如何在导航栏中均匀分配图像空间？

uqzxnwby  于 2023-06-07  发布在  其他
关注(0)|答案(5)|浏览(179)

在一个水平导航条中，我有小的图像，它们被不同的空间隔开。在一个图像和另一个图像之间有一个不同的空白空间。
我想在这个水平导航条中的每个图像之间获得相同的空白空间，而问题是，现在图像被定位为彼此不同的空间。我想得到的结果是这个截图。谢谢你。

我尝试了各种justify-content，但什么都没有。
你也可以看看Codepen。

.my-container {
  display: flex;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.my-flex {
  display: flex;
  flex-wrap: nowrap;
}

.disable {
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-indent: 110%;
}

li {
  list-style-type: none;
}

.atalanta {
  background: url('https://i.ibb.co/MfVyXRY/atalanta.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.bologna {
  background: url('https://i.ibb.co/sttS1T9/bologna.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.cremonese {
  background: url('https://i.ibb.co/W6N0Jwg/cremonese.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.empoli {
  background: url('https://i.ibb.co/Yyjycb5/empoli.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.fiorentina {
  background: url('https://i.ibb.co/dmMF3Hw/fiorentina.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.verona {
  background: url('https://i.ibb.co/cbRzLK3/hellas.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.inter {
  background: url('https://i.ibb.co/4wbLqYd/inter.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.juventus {
  background: url('https://i.ibb.co/42ChC8w/juve.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.lazio {
  background: url('https://i.ibb.co/CPPntPm/lazio.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.lecce {
  background: url('https://i.ibb.co/2KLGvzK/lecce.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.milan {
  background: url('https://i.ibb.co/gWXyj17/milan.png') no-repeat 50%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.monza {
  background: url('https://i.ibb.co/WxFDdJk/monza.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.napoli {
  background: url('https://i.ibb.co/LYVKhx0/napoli.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.roma {
  background: url('https://i.ibb.co/gj9Nj4x/roma.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.salernitana {
  background: url('https://i.ibb.co/RYMzs5L/salernitana.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.sampdoria {
  background: url('https://i.ibb.co/vwGYGc9/sampdoria.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.sassuolo {
  background: url('https://i.ibb.co/CHXBS7X/sassuolo.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.spezia {
  background: url('https://i.ibb.co/QJ8S2KY/spezia.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.torino {
  background: url('https://i.ibb.co/wYKTSGW/torino.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}

.udinese {
  background: url('https://i.ibb.co/bWFBx1V/udinese.png') no-repeat 0%;
  background-size: 35px 35px;
  padding-top: 18px;
}
<head>
  <!-- Boostrap Files -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <!-- My Css -->
</head>

<body>
  <div class="my-container">
    <nav class="navbar bg-body-tertiary my-flex">
      <div class="container-fluid">


        <li>
          <a class="atalanta disable" href="roma.html" title="Atalanta" width="35" height="35">
            <font style="vertical-align: inherit;">atalanta</font>
          </a>
        </li>

        <li>
          <a class="bologna disable" href="roma.html" title="Bologna" width="35" height="35">
            <font style="vertical-align: inherit;">bologna</font>
          </a>
        </li>

        <li>
          <a class="cremonese disable" href="roma.html" title="Cremonese" width="35" height="35">
            <font style="vertical-align: inherit;">cremonese</font>
          </a>
        </li>

        <li>
          <a class="empoli disable" href="roma.html" title="Empoli" width="35" height="35">
            <font style="vertical-align: inherit;">empoli</font>
          </a>
        </li>


        <li>
          <a class="fiorentina disable" href="roma.html" title="Fiorentina" width="35" height="35">
            <font style="vertical-align: inherit;">fiorentina</font>
          </a>
        </li>

        <li>
          <a class="verona disable" href="roma.html" title="Verona" width="35" height="35">
            <font style="vertical-align: inherit;">verona</font>
          </a>
        </li>

        <li>
          <a class="inter disable" href="roma.html" title="Inter" width="35" height="35">
            <font style="vertical-align: inherit;">inter</font>
          </a>
        </li>

        <li>
          <a class="juventus disable" href="roma.html" title="Juventus" width="35" height="35">
            <font style="vertical-align: inherit;">juventus</font>
          </a>
        </li>

        <li>
          <a class="lazio disable" href="roma.html" title="Lazio" width="35" height="35">
            <font style="vertical-align: inherit;">lazio</font>
          </a>
        </li>

        <li>
          <a class="lecce disable" href="roma.html" title="Lecce" width="35" height="35">
            <font style="vertical-align: inherit;">lecce</font>
          </a>
        </li>

        <li>
          <a class="milan disable" href="roma.html" title="Milan" width="35" height="35">
            <font style="vertical-align: inherit;">milan</font>
          </a>
        </li>

        <li>
          <a class="monza disable" href="roma.html" title="Monza" width="35" height="35">
            <font style="vertical-align: inherit;">monza</font>
          </a>
        </li>

        <li>
          <a class="napoli disable" title="Napoli" width="35" height="35">
            <font style="vertical-align: inherit;">napoli</font>
          </a>
        </li>

        <li>
          <a class="roma disable" href="roma.html" title="Roma" width="35" height="35">
            <font style="vertical-align: inherit;">roma</font>
          </a>
        </li>

        <li>
          <a class="salernitana disable" href="roma.html" title="Salernitana" width="35" height="35">
            <font style="vertical-align: inherit;">salernitana</font>
          </a>
        </li>

        <li>
          <a class="sampdoria disable" href="roma.html" title="Sampdoria" width="35" height="35">
            <font style="vertical-align: inherit;">sampdoria</font>
          </a>
        </li>

        <li>
          <a class="sassuolo disable" href="roma.html" title="Sassuolo" width="35" height="35">
            <font style="vertical-align: inherit;">sassuolo</font>
          </a>
        </li>

        <li>
          <a class="spezia disable" href="roma.html" title="Spezia" width="35" height="35">
            <font style="vertical-align: inherit;">spezia</font>
          </a>
        </li>

        <li>
          <a class="torino disable" href="roma.html" title="Torino" width="35" height="35">
            <font style="vertical-align: inherit;">torino</font>
          </a>
        </li>

        <li>
          <a class="udinese disable" href="roma.html" title="Udinese" width="35" height="35">
            <font style="vertical-align: inherit;">udinese</font>
          </a>
        </li>
      </div>
    </nav>
  </div>
</body>
css

5条答案

按热度按时间
nlejzf6q

nlejzf6q1#

如前所述，将列表项 Package 在列表中，不要使用font元素，该元素已被弃用。锚点没有width或height属性。
然后，使用布局库提供的工具。你已经写了一堆自定义CSS，它可以做Bootstrap已经提供给你的东西，比如display变体和flexbox。
你如何间隔锚是由你决定的，但一点水平边缘似乎起作用。
然后，如果你发现自己重复代码不止一次，你就做错了。使用子代选择器或公共类，您可以通过一条规则轻松地将大小调整到列表中的所有锚点。
最后，不要将Bootstrap文档CSS加载到您的网站中。它不是CDN，而且你可能也不需要它。

.my-container {
  max-width: 1080px;
}

.disable {
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-indent: 110%;
}

li {
  list-style-type: none;
}

li a {
  width: 35px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 18px;
  margin: 0 .25rem;
}

.atalanta {
  background-image: url('https://i.ibb.co/MfVyXRY/atalanta.png');
}

.bologna {
  background-image: url('https://i.ibb.co/sttS1T9/bologna.png');
}

.cremonese {
  background-image: url('https://i.ibb.co/W6N0Jwg/cremonese.png');
}

.empoli {
  background-image: url('https://i.ibb.co/Yyjycb5/empoli.png');
}

.fiorentina {
  background-image: url('https://i.ibb.co/dmMF3Hw/fiorentina.png');
}

.verona {
  background-image: url('https://i.ibb.co/cbRzLK3/hellas.png');
}

.inter {
  background-image: url('https://i.ibb.co/4wbLqYd/inter.png');
}

.juventus {
  background-image: url('https://i.ibb.co/42ChC8w/juve.png');
}

.lazio {
  background-image: url('https://i.ibb.co/CPPntPm/lazio.png');
}

.lecce {
  background-image: url('https://i.ibb.co/2KLGvzK/lecce.png');
}

.milan {
  background-image: url('https://i.ibb.co/gWXyj17/milan.png');
}

.monza {
  background-image: url('https://i.ibb.co/WxFDdJk/monza.png');
}

.napoli {
  background-image: url('https://i.ibb.co/LYVKhx0/napoli.png');
}

.roma {
  background-image: url('https://i.ibb.co/gj9Nj4x/roma.png');
}

.salernitana {
  background-image: url('https://i.ibb.co/RYMzs5L/salernitana.png');
}

.sampdoria {
  background-image: url('https://i.ibb.co/vwGYGc9/sampdoria.png');
}

.sassuolo {
  background-image: url('https://i.ibb.co/CHXBS7X/sassuolo.png');
}

.spezia {
  background-image: url('https://i.ibb.co/QJ8S2KY/spezia.png');
}

.torino {
  background-image: url('https://i.ibb.co/wYKTSGW/torino.png');
}

.udinese {
  background-image: url('https://i.ibb.co/bWFBx1V/udinese.png');
}
<head>
  <!-- Boostrap Files -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- My Css -->
</head>

<body>
  <div class="my-container d-flex justify-content-center mx-auto">
    <nav class="navbar bg-body-tertiary">
      <div class="container-fluid">
        <ul class="d-flex p-0 m-0">
          <li>
            <a class="atalanta disable" href="roma.html" title="Atalanta">atalanta</a>
          </li>

          <li>
            <a class="bologna disable" href="roma.html" title="Bologna">bologna</a>
          </li>

          <li>
            <a class="cremonese disable" href="roma.html" title="Cremonese">cremonese</a>
          </li>

          <li>
            <a class="empoli disable" href="roma.html" title="Empoli">empoli</a>
          </li>

          <li>
            <a class="fiorentina disable" href="roma.html" title="Fiorentina">fiorentina</a>
          </li>

          <li>
            <a class="verona disable" href="roma.html" title="Verona">verona</a>
          </li>

          <li>
            <a class="inter disable" href="roma.html" title="Inter">inter</a>
          </li>

          <li>
            <a class="juventus disable" href="roma.html" title="Juventus">juventus</a>
          </li>

          <li>
            <a class="lazio disable" href="roma.html" title="Lazio">lazio</a>
          </li>

          <li>
            <a class="lecce disable" href="roma.html" title="Lecce">lecce</a>
          </li>

          <li>
            <a class="milan disable" href="roma.html" title="Milan">milan</a>
          </li>

          <li>
            <a class="monza disable" href="roma.html" title="Monza">monza</a>
          </li>

          <li>
            <a class="napoli disable" title="Napoli">napoli</a>
          </li>

          <li>
            <a class="roma disable" href="roma.html" title="Roma">roma</a>
          </li>

          <li>
            <a class="salernitana disable" href="roma.html" title="Salernitana">salernitana</a>
          </li>

          <li>
            <a class="sampdoria disable" href="roma.html" title="Sampdoria">sampdoria</a>
          </li>

          <li>
            <a class="sassuolo disable" href="roma.html" title="Sassuolo">sassuolo</a>
          </li>

          <li>
            <a class="spezia disable" href="roma.html" title="Spezia">spezia</a>
          </li>

          <li>
            <a class="torino disable" href="roma.html" title="Torino">torino</a>
          </li>

          <li>
            <a class="udinese disable" href="roma.html" title="Udinese">udinese</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</body>
赞(0）分享  回复(0）举报  2023-06-07
neskvpey

neskvpey2#

在需要的navbar类中使用以下属性：

display: flex;
flex-direction: column;
justify-content: space-evenly;
赞(0）分享  回复(0）举报  2023-06-07
vohkndzv

vohkndzv3#

问题是没有有效的定义宽度，只有<a ... width="35" height="35">的无效尝试
您应该声明块级li s的宽度。这里有一个起点：

li {
    list-style-type: none;
    width: 35px;
}

(This时间，我只花时间回答你的主要问题，而不是纠正你的标记。

赞(0）分享  回复(0）举报  2023-06-07
fafcakar

fafcakar4#

这其实很简单。
用我下面的代码替换你的.my-flex，然后添加.navbar css和li a css，这将完成你想要的工作

.my-flex {
    display: flex;
    justify-content: space-between;
}
.navbar{
  width:1080px;
}
li a{
  width: 35px;
  height:35px;
  display: inline-block;
}
赞(0）分享  回复(0）举报  2023-06-07
z9gpfhce

z9gpfhce5#

背景图像的可变宽度是由字体元素内的文本内容引起的。要解决此问题并实现等间距图像，您可以在font元素上应用以下CSS：

font {
    display: block;
    width: 35px; /* Replace with the desired width */
    height: 35px; /* Replace with the desired height */
}

通过将display属性设置为block并指定所需的宽度和高度，可以确保font元素的尺寸一致，这反过来会影响背景图像的大小。根据您的具体要求调整width和height的值。

赞(0）分享  回复(0）举报  2023-06-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com