0
メニューヘッダーで作業していますが、何とかすべての要素が1つの水平線で整列していません。彼らはお互いのすぐ下に表示されています。ここでは以下の私のjsfiddleメニューのヘッダーで整列が乱雑になっている
は私のHTMLです：
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<a href="#"><b>INSURANCE</b> <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-content">
<li><a href="#"><i>INDIVIDUAL</i></a>
</li>
<li><a href="#"><i>CORPORATE</i></a>
</li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
</li>
</ul>
</nav>
</div>
そして、ここでは私のCSSです：
@font-face {
font-family: AvantGarde Demi;
src: url(AvantGarde Demi.woff);
}
@font-face {
font-family: AvantGarde;
src: url(AvantGarde.woff);
}
@font-face {
font-family: ITC Avant Garde Gothic;
src: url(ITC Avant Garde Gothic.woff);
}
.topnav {
background-color: #333;
overflow: hidden;
padding: 0 10px;
}
.topnav > img,
nav {
display: inline-block;
vertical-align: middle;
}
nav > ul {
margin: 0;
}
.topnav .dropdown {
display: block;
float: left;
text-align: center;
}
.topnav a {
color: white;
display: block;
font-size: 17px;
text-decoration: none;
}
.topnav .dropdown > a {
padding: 20px 16px;
}
.topnav .dropdown-content li > a {
padding: 10px 16px;
}
.topnav ul > li > ul {
background-color: #f76c38;
display: none;
padding: 0;
position: absolute;
width: 200px;
}
.topnav ul > li > ul > li {
display: block;
text-align: left;
}
body {
border: 0;
height: 100%;
margin: 0;
min-height: 100%;
overflow-x: hidden;
}
.fa-6 {
font-size: 1.5em;
}
.login {
color: white;
display: inline;
font-family: AvantGarde;
font-size: 11.433px;
letter-spacing: .25em;
padding-left: 15px;
}
.login a {
color: white;
text-decoration: none;
}
.login a:hover {
color: #fe5b1f;
text-decoration: none;
}
.container {
width: 100% !important;
}
li.insurance {
padding-top: 30px !important;
}
li.our-story {
padding-top: 30px !important;
}
li.login-signup {
padding-top: 30px !important;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.our-story {
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
color: white;
font-family: Adelle PE;
font-size: 12px;
font-style: italic;
letter-spacing: .30em;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
font-family: Adelle PE;
letter-spacing: .30em;
}
li.get-covered:hover {
background-color: #EF7440;
}
li.insurance {
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
margin-left: 80px;
margin-right: 80px;
}
私はすべてがメニューヘッダに1行で水平に整列させたいです。一例として、このimageを見ると、少し傾いていますが、私のメニューヘッダーがその黒い背景にどのように見えるかを知ることができます。
これは今、それが台無しになっていた理由です。ここに私の更新された[jsfiddle]（https://jsfiddle.net/2nv4dd2w/30/）がありますが、私が質問で提供したイメージと比較すると、私のフィドルで見ることができるように完全に整列していません。どんな考え？ –
あなたのCSSを整理し、/ * ... * /を使ってコードをコメントに変更しました。ここのフィドルを見てください。https://jsfiddle.net/beekvang/2nv4dd2w/31/ – Gerard