css - 中间标题/两侧菜单

Question

下午好，我需要有关网站菜单的帮助。我想将标题放在中间并在两侧 flex 菜单，但它不想做任何事情。请帮忙。颜色仅供测试。我会在发布后更改它们。下面的代码。我希望你能理解并帮助我解决这个问题。

HTML

@import url('https://fonts.googleapis.com/css?family=Pacifico');

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  vertical-align: center;
}

/* ----- HEADER -----*/

body header {
  width: 100%;
  height: 90px;
  margin: 0;
  padding: 0;
  background-color: black;
  border-bottom: 2px solid #FFFFFF;
  box-shadow: 0px 8px 8px 0px rgba(215,223,237,.8);
}

/* ----- HEADER TITLE ----- */

body header .TITLE {
  line-height: 90px;
  width: 20%;
  background-color: aqua;
  position: absolute;
  left: 40%;
  right: 40%; 
  text-align: center;
}

body header .TITLE h1 {
  margin: 0;
  font-family: 'Pacifico', cursive;
  font-size: 45px;
  color: orange;
}

/* ----- HEADER TITLE ----- */

/* ----- HEADER MENU LEFT ----- */

body header .HEADERMENULEFT {
  float: left;
}

body header .HEADERMENULEFT ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;  
}

body header .HEADERMENULEFT ul li {    
  flex-grow: 1; 
  float: right;                             
  text-align: center;
  width: 100%;	
}

body header .HEADERMENULEFT ul li a {
  color: white;
  text-decoration: none;
  display: block; 

/*line-height: 35px;
margin-top: 22px;
background-color: #90afc5;
height: 35px;
margin-left: 50px;
margin-right: 50px;
border-radius: 50px;*/
}

/* ----- HEADER MENU LEFT ----- */

/* ----- HEADER MENU RIGHT ----- */

body header .HEADERMENURIGHT {
  float: right;
}

body header .HEADERMENURIGHT ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;  
}

body header .HEADERMENURIGHT ul li {    
  flex-grow: 1; 
  float: right;                             
  text-align: center;
  width: 100%;	
}

body header .HEADERMENURIGHT ul li a {
  color: white;
  text-decoration: none;
  display: block; 

/*line-height: 35px;
margin-top: 22px;
background-color: #90afc5;
height: 35px;
margin-left: 50px;
margin-right: 50px;
border-radius: 50px;*/
}

/* ----- HEADER MENU RIGHT ----- */

/* ----- HEADER ----- */

<header>
    <div class="TITLE">
        <h1>MyWeb</h1>
    </div>
    <div class="HEADERMENULEFT">
        <ul>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
        </ul>
    </div>
    <div class="HEADERMENURIGHT">
        <ul>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
        </ul>
    </div>
</header>

Answer 1

标题居中和左右菜单

@import url('https://fonts.googleapis.com/css?family=Pacifico');

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  vertical-align: center;
}

/* ----- HEADER -----*/

body header {
  width: 100%;
  height: 90px;
  margin: 0;
  padding: 0;
  background-color: black;
  border-bottom: 2px solid #FFFFFF;
  box-shadow: 0px 8px 8px 0px rgba(215,223,237,.8);
}

/* ----- HEADER TITLE ----- */

body header .TITLE {
  line-height: 90px;
  background-color: aqua;
  float: left;
  text-align: center;
  width:20%;
}

body header .TITLE h1 {
  margin: 0;
  font-family: 'Pacifico', cursive;
  font-size: 45px;
  color: orange;
}

/* ----- HEADER TITLE ----- */

/* ----- HEADER MENU LEFT ----- */

body header .HEADERMENULEFT {
  float: left;
  width:40%;
}

body header .HEADERMENULEFT ul {
  margin: 0;
  padding: 35px 10px;
  list-style: none;
  display: flex;  
}

body header .HEADERMENULEFT ul li {    
  flex-grow: 1; 
  float: right;                             
  text-align: center;
  width: 100%;	
}

body header .HEADERMENULEFT ul li a {
  color: white;
  text-decoration: none;
  display: block; 

/*line-height: 35px;
margin-top: 22px;
background-color: #90afc5;
height: 35px;
margin-left: 50px;
margin-right: 50px;
border-radius: 50px;*/
}

/* ----- HEADER MENU LEFT ----- */

/* ----- HEADER MENU RIGHT ----- */

body header .HEADERMENURIGHT {
   float: right;
   width:40%;
}

body header .HEADERMENURIGHT ul {
  margin: 0;
  padding: 35px 10px;
  list-style: none;
  display: flex;  
}

body header .HEADERMENURIGHT ul li {    
  flex-grow: 1; 
  float: right;                             
  text-align: center;
  width: 100%;	
}

body header .HEADERMENURIGHT ul li a {
  color: white;
  text-decoration: none;
  display: block; 

/*line-height: 35px;
margin-top: 22px;
background-color: #90afc5;
height: 35px;
margin-left: 50px;
margin-right: 50px;
border-radius: 50px;*/
}

<header>

	
    
	<div class="HEADERMENULEFT">
        <ul>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
        </ul>
    </div>
     <div class="TITLE">
        <h1>MyWeb</h1>
    </div>
    <div class="HEADERMENURIGHT">
        <ul>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
            <li><div class="BORDER"><a href="#">TEST</a></div></li>
        </ul>
    </div>
    
</header>