我怎样才能使我的导航栏更均匀，我怎样才能减少一些代码？（感谢您的格式化帮助）

Question

My code and site

出于某种原因，导航栏右侧的文本比左侧的文本更靠近中间，我也觉得添加的大部分 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，以后怎么避免呢？

Answer 1

我可以向您推荐这个解决方案：

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>

Answer 2

从 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>

我怎样才能使我的导航栏更均匀，我怎样才能减少一些代码？（感谢您的格式化帮助）

How can i mage my nav bar more even and how can i cut down on some code? (thank you for the formatting help)

html

css

flexbox

nav

我怎样才能使我的导航栏更均匀，我怎样才能减少一些代码？ （感谢您的格式化帮助）

How can i mage my nav bar more even and how can i cut down on some code? (thank you for the formatting help)

html

css

flexbox

nav

我怎样才能使我的导航栏更均匀，我怎样才能减少一些代码？（感谢您的格式化帮助）