制作导航栏标题
问题描述:
有问题
我试图做一个导航栏我的页面顶部制作导航栏标题
.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经历。我是一个试图建立自己的网站的新手。
答
我做了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>
从PHP产生与dollarydoos!? – M0ns1f
@ M0ns1f没有PHP。我甚至不知道PHP。 – Arszilla