前提・実現したいこと
ここに質問の内容を詳しく書いてください。
HTML,CSSでheaderを作っています。
①ロゴを左寄せ、②テキストを右寄せ、③ロゴとテキストを上下中央に配置の3つを同時に行うことができません。
また画面を狭めた状態でも以上の3つの状態を維持して表示したいのですが、②と③がなかなか上手く表示されない状況です。
CSSへのアドバイスいただければ幸いです。
該当のソースコード
HTMLのソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Trial LP</title> <link rel="stylesheet" href="scss/style.css"> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script> </head> <body> <!-- header --> <header id="top-head" class="fixed"> <div class="inner"> <div id="mobile-head"> <h1 class="logo"> <a href="#"><img src="img/logo.png"></a> </h1> <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> </div> <nav id="global-nav"> <ul> <li><a href="#">Card</a></li> <li><a href="#">News</a></li> <li><a href="#">Price</a></li> <li><a href="#">Access</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </header> </body> </html>CSSのソースコード
@charset "UTF-8";
#top-head{
background-color: white;
width: 100%;
height: 100px;
position: fixed;
}
#top-head a{
color: red;
text-decoration: none;
}
.inner{
padding: 0 140px;
position: fixed;
}
#mobile-head{
width: 100%;
}
#top-head .logo {
position: absolute;
top: 20px; /ロゴの上下の位置/
float: left;
}
#global-nav ul {
list-style: none;
font-size: 16px;
}
#global-nav ul li {
float: left;
padding-left:30px;
}
ソースコード
試したこと
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。