如何解决为什么我不能更改弹性项目的大小?
这是我的代码
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
header nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 3em;
background-color: #783F27;
}
.naviga {
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 10em;
color: goldenrod;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a class="naviga" href="">Menu</a></li>
<li><a class="naviga" href="">News</a></li>
<li><a class="naviga" href="">About</a></li>
<li><a class="naviga" href="">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
即使我指定了 <li>
,min-content
元素也会以 max-content
的宽度显示(或者 width: 10em
在这种情况下是相同的)。如果我指定 height
,也会发生同样的事情。这是为什么?
解决方法
你应该改变 li 而不是 a 标签的宽度,请看下面的例子
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
header nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 3em;
background-color: #783F27;
}
.naviga {
color: goldenrod;
}
.liClass {
border: solid goldenrod;
border-radius: 0.4em;
margin: 0 0.5em;
width: 20em;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li class="liClass"><a class="naviga" href="">Menu</a></li>
<li class="liClass"><a class="naviga" href="">News</a></li>
<li class="liClass"><a class="naviga" href="">About</a></li>
<li class="liClass"><a class="naviga" href="">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
我猜,我还没有运行代码,但看起来这可能是问题所在?
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
您为整个文档定义了两次框大小。尝试删除其中之一,我会测试您的代码,然后再向您提供更多详细信息。
我建议 box-sizing: border-box; for * 并将其从 html {} 元素中删除
另外,像这样将 display 属性添加到导航器的 css 中,它就可以工作了。
.naviga {
display: flex;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 200px;
color: goldenrod;
}
,
flex
属性设置灵活项目的灵活长度。
flex: 0 0 40%
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。