前提・実現したいこと
ここに質問の内容を詳しく書いてください。
HTMLとCSSでWebページを作成しています。
ヘッダーにロゴを左に表示し右詰めで文字を並べたいのですが、画像がはみ出て、文字が縦に並んでしまいます。
該当のソースコード
#<HTML>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>●●●</title> <link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <img class="logo" src="<header左に表示させたいロゴURL>"> </div> <div class="header-right"> <a href="#" class="login">ホーム</a> <a href="#" class="login">転職者</a> <a href="#" class="login">選考一覧</a></div> </div> </div> </header></div>
</body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー # <CSS> html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; }</footer>
body{
font-family:"Avenir Next", sans-serif;
}
li{
float:left;
list-style:none;
padding:33px 20px;
}
header {
height: 65px;
width: 100%;
background-color: white;
position :fixed;
top: 0;
z-index: 10;
}
.logo {
width: 124px;
margin-top: 20px;
}
.header-left {
float: left;
}
.header-right {
float: right;
background-color: rgba(255, 255, 255, 0.3);
transition: all 0.5s;
}
.header-right:hover {
background-color: white;
}
.header-right a {
line-height: 65px;
padding: 0 25px;
color: #DDDDDD ;
display: block;
}
_________________________
ATOMを使っています。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/02/11 11:50 編集