英文:
How to equally space images in a navbar?
问题
你想要在水平导航栏中的每个图像之间获得相同的空白间距，而不是它们当前的不同间距。你可以尝试使用以下 CSS 样式来实现这个效果：
.my-flex li {
margin-right: 10px; /* 调整此值以增加或减少空白间距 */
}
将这个样式添加到你的 CSS 文件中，并调整 margin-right 的值以获得你想要的空白间距。这样，每个图像之间的间距将保持一致。
英文:
In one horizontal navbar i have small images that are spaced out with different spaces. Between one image and another there is a different empty space.
I would like to get the same empty space between each image in this horizontal navbar, instead the problem is that now the images are positioned with different spaces from each other. The result I would like to get is this screenshot. Thank you.
I tried with various justify-content, but got nothing.
You can also take a look at Codepen.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 0
display: flex;
flex-direction: column;
justify-content: space-evenly;
英文:
Use these properties in the navbar class you want:
display: flex;
flex-direction: column;
justify-content: space-evenly;
答案2
得分: 0
问题在于没有有效的定义宽度，只有你无效的尝试 <a ... width="35" height="35">。
你应该声明块级别 li 的宽度。以下是一个起点：
li {
list-style-type: none;
width: 35px;
}
(这次，我只回答你的主要问题，不会纠正你的标记。)
英文:
The problem is that there isn't a valid defined width, only your invalid attempt of <a ... width="35" height="35">
You should declare the width of the block-level lis. Here's a starting point:
li {
list-style-type: none;
width: 35px;
}
(This time, I'm spending time only on answering your main question and not correcting your markup.)
答案3
得分: 0
这实际上相当简单。
将你的 .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;
}
英文:
This is actually quite simple.
replace your .my-flex with the code i put below then add .navbar css and li a css and that will do the job you want it to do
.my-flex {
display: flex;
justify-content: space-between;
}
.navbar{
width:1080px;
}
li a{
width: 35px;
height:35px;
display: inline-block;
}
答案4
得分: 0
以下是已翻译的部分：
"The variable width of the background images is caused by the text content within the font element. To address this issue and achieve equally spaced images, you can apply the following CSS on the font element:
font {
display: block;
width: 35px; /* Replace with the desired width /
height: 35px; / Replace with the desired height */
}
By setting the display property to block and specifying the desired width and height, you can ensure consistent dimensions for the font element, which will, in turn, impact the sizing of the background images. Adjust the values of width and height according to your specific requirements."
英文:
The variable width of the background images is caused by the text content within the font element. To address this issue and achieve equally spaced images, you can apply the following CSS on the font element:
font {
display: block;
width: 35px; /* Replace with the desired width */
height: 35px; /* Replace with the desired height */
}
By setting the display property to block and specifying the desired width and height, you can ensure consistent dimensions for the font element, which will, in turn, impact the sizing of the background images. Adjust the values of width and height according to your specific requirements.
答案5
得分: 0
以下是翻译好的部分：
如前所述，将您的列表项包装在一个列表中，不要使用已弃用的font元素。并且锚点不具有宽度或高度属性。
然后，使用您的布局库提供的工具。您已经编写了一堆自定义CSS，这些CSS已经可以在Bootstrap中找到，例如display变体和flexbox。
如何排列锚点取决于您，但略微的水平间距似乎能够工作。
最后，如果您发现自己重复编写代码超过一次，那么您可能做错了。您可以使用后代选择器或通用类轻松地对列表中的所有锚点应用大小调整规则。
最后，不要将Bootstrap文档的CSS加载到您的网站中。它不是CDN，而且您可能不需要它。
请注意，这是您提供的代码的翻译，不包括代码本身。
英文:
As has been said, wrap your list items in a list and don't use the font element, which is deprecated. And anchors don't have width or height attributes.
Then, use the tools that your layout library offers. You've written a bunch of custom CSS which does things Bootstrap already gives you, such as display variations and flexbox.
How you space the anchors is up to you, but a little horizontal margin seems to work.
Then, if you find yourself repeating code more than once you're doing it wrong. You can easily apply sizing to all anchors in the list with one rule using a descendant selector or a common class.
Finally, don't load the Bootstrap docs CSS into your website. It's not a CDN, and you probably don't need it anyway.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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');
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论