制作导航栏标题

Question

有问题

我试图做一个导航栏我的页面顶部

.header { 
 
    width: 100%; 
 
    background-color: #2C2F33; 
 
    border-bottom: 2.5px #FF9F00 solid; 
 
    font-size: 15px; 
 
} 
 

 
#logo img { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 20px; 
 
    width: 187.5px; 
 
    height: 63.75px; 
 
} 
 

 
.navbar { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.navbar, 
 
li { 
 
    display: inline; 
 
    padding: 0 22.5px 0 22.5px; 
 
} 
 

 
.navbar, 
 
li, 
 
a { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
} 
 

 
.navbar, 
 
li, 
 
a:hover { 
 
    color: #FF9F00; 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
} 
 

 
#dollarydoos, 
 
#dsh { 
 
    color: #FF9F00; 
 
} 
 

 
#dosh { 
 
    color: #FFFFFF; 
 
}

<div class="header"> 
 

 
    <div id="logo"> 
 

 
    <img src="./img/logo.png"></img> 
 

 
    </div> 
 

 
    <div class="navbar"> 
 

 
    <div id="leftnavbar"> 
 

 
     <ul> 
 

 
     <li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li> 
 

 
     </ul> 
 

 
    </div> 
 

 
    <div id="rightnavbar"> 
 

 
     <ul> 
 

 
     <li><a href="index.html">Button1</a></li> 
 

 
     <li><a href="index.html">Button2</a></li> 
 

 
     <li><a href="index.html">Button3</a></li> 
 

 
     <li><a href="index.html">Button4</a></li> 
 

 
     </ul> 
 

 
    </div> 
 

 
    </div> 
 

 
</div>

我不能得到的按钮和dollardoos有一个小包围它的框（内部）并与标志的中心对齐，并在中心线上列出。

像这样：

我怎样才能做到这一点，因为我没有太多的HTML/CSS经历。我是一个试图建立自己的网站的新手。

Answer 1

我做了header的Flexbox的和去除display:inline为navbar

.header { 
 
    width: 100%; 
 
    background-color: #2C2F33; 
 
    border-bottom: 2.5px #FF9F00 solid; 
 
    font-size: 15px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#logo img { 
 
    margin: 0; 
 
    padding: 20px; 
 
    width: 187.5px; 
 
    height: 63.75px; 
 
} 
 

 
.navbar { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin-left: auto; 
 
} 
 

 
li { 
 
    display: inline; 
 
    padding: 0 22.5px 0 22.5px; 
 
} 
 

 
.navbar, 
 
li, 
 
a { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
} 
 

 
.navbar, 
 
li, 
 
a:hover { 
 
    color: #FF9F00; 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
} 
 

 
#dollarydoos, 
 
#dsh { 
 
    color: #FF9F00; 
 
} 
 

 
#dosh { 
 
    color: #FFFFFF; 
 
}

<div class="header"> 
 
    <div id="logo"> 
 
    <img src="http://placehold.it/200x100"> 
 
    </div> 
 
    <div class="navbar"> 
 
    <div id="leftnavbar"> 
 
     <ul> 
 
     <li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li> 
 
     </ul> 
 
    </div> 
 
    <div id="rightnavbar"> 
 
     <ul> 
 
     <li><a href="index.html">Button1</a></li> 
 
     <li><a href="index.html">Button2</a></li> 
 
     <li><a href="index.html">Button3</a></li> 
 
     <li><a href="index.html">Button4</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>