如何解决我怎样才能更均匀地调整我的导航栏,我怎样才能减少一些代码? 感谢您的格式化帮助
出于某种原因,导航栏右侧的文本比左侧的文本更靠近中间,我也觉得添加的大部分 flex ive 都是不必要的
body {
background-color: yellowgreen;
color: black;
padding: 0;
margin: 0;
}
Header {
background-color: palevioletred;
display: flex;
flex-direction: row;
flex: 1 0 100%;
list-style: none;
text-align:center;
width:100%;
}
ul{
display:flex;
flex-direction: row;
flex:1 0 0;
}
li{
display:flex;
flex-direction: row;
flex:1 0 0;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href='style.css' type='text/css' <head>
</head>
<body>
<header>
<ul>
<li><h2>main</h2> </li>
<li><h2>main</h2> </li>
<li><h1>Welcome</h1></li>
<li><h2>main</h2> </li>
<li><h2>main</h2> </li>
</ul>
</header>
</body>
ry,将来如何避免这种情况?
解决方法
我可以向您推荐这个解决方案:
body{
background-color: green;
color: black;
padding: 0;
margin: 0;
}
header{
background-color: pink;
display: flex;
flex-direction: row;
flex: 1 0 100%;
list-style: none;
text-align: center;
width: 100%;
}
ul{
display: flex;
flex-direction: row;
flex: 1 0 0;
padding: 0; /*ADD => remove space (tabulation) before <li> block*/
}
li{
/*display: flex;
flex-direction: row;*/ /*REMOVE*/
flex: 1 0 0;
list-style: none; /*REMOVE point before title*/
}
<body>
<header>
<ul>
<li><h2>main</h2></li>
<li><h2>main</h2></li>
<li><h1>Welcome</h1></li>
<li><h2>main</h2></li>
<li><h2>main</h2></li>
</ul>
</header>
</body>
从 li 似乎修复了它的代码中删除了这一点
display:flex;
flex-direction: row;
body {
background-color: yellowgreen;
color: black;
padding: 0;
margin: 0;
}
Header {
background-color: palevioletred;
display: flex;
flex-direction: row;
flex: 1 0 100%;
list-style: none;
text-align:center;
width:100%;
}
ul{
display:flex;
flex-direction: row;
flex:1 0 0;
}
li{
list-style: none;
flex:1 0 0;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href='style.css' type='text/css' <head>
</head>
<body>
<header>
<ul>
<li><h2>main</h2> </li>
<li><h2>main</h2> </li>
<li><h1>Welcome</h1></li>
<li><h2>main</h2> </li>
<li><h2>main</h2> </li>
</ul>
</header>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。