gpt4 book ai didi

javascript - 导航栏在不应该的时候换行

转载 作者:太空宇宙 更新时间:2023-11-04 03:58:37 24 4
gpt4 key购买 nike

我制作了一个宽度为 1000 像素的导航栏,其中包含 4 个 250 像素宽的链接。我还将所有元素的填充和边距设置为 0。但是由于某种原因,元素仍然换行到另一行,当我将宽度降低到 247px 或更小时,它们都显示在同一行上,但它们换行 248 或更多.这是我的 CSS:

*
{
margin: 0;
padding: 0;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.container
{
border: 1px solid;
margin-left: auto;
margin-right: auto;
width: 1000px;

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

.menu-container
{
min-height:60px;
}

nav a, a:link, a:visited
{
color: #000000;
display: inline-block;
font-size: 60px;
line-height: 60px;
text-decoration: none;
width: ###px;
text-align: center;
}

nav a:hover
{
background-color: #000000;
color: #FFFFFF;
}

当### 小于等于 247 时,它们都显示在一行中,当它大于等于 248 时,它们换行。

这是我的 html:

<div class="container">
<div class="menu-container">
<nav>
<a href="/">Home</a>
<a href="/games">Games</a>
<a href="/tags">Tags</a>
<a href="/scores">Scores</a>
</nav>
</div>
</div>

我真的希望它们每个都是 250 像素宽,以便它们占据导航栏的整个宽度(将它们设置为 247 像素不会占据整个导航栏)但我不希望它们换行。有谁知道问题出在哪里?

最佳答案

当使用 inline-block 时,将考虑空格

<div class="container">
<div class="menu-container">
<nav>
<a href="/">Home</a><!-- white space here -->
<a href="/games">Games</a><!-- white space here -->
<a href="/tags">Tags</a><!-- white space here -->
<a href="/scores">Scores</a><!-- white space here -->
</nav>
</div>
</div>

一个简单的修复方法是

<nav>
<a href="/">Home</a><a href="/games">Games</a><a href="/tags">Tags</a><a href="/scores">Scores</a>
</nav>

您也可以考虑改进您的 HTML。当您尝试显示用于导航的链接列表时,请考虑使用 ulli

更新

部分典型案例

Apple

ul {
display: table;
width: 845px;
table-layout: fixed;
}

li {
display: table-cell;
width: 100%;
overflow: hidden;
}

a{
display;block
}

Yahoo

ul{
white-space: nowrap;
overflow: hidden;
}
li {
display: inline-block;
}

关于javascript - 导航栏在不应该的时候换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22434523/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com