クラス付けしたul(4つのliの塊)をヘッダー内の右寄せにしたいのですが、上手くいきません。
というのも、CSSでセレクタ(.select)を指定しているにも関わらず、右寄せに出来ないどころか、文字を大きくしたり、色を付けようとしても反映されないため、どこかに間違いがあるのだとは思うのですが理由がわかりません。
なぜ、クラス付けしたulへのCSS一括指定が反映されないのか、理由をご教授いただけますと助かります。
よろしくお願いいたします。
HTML
1コード 2<!DOCTYPE html> 3<html> 4 <head> 5 <title>Airbnbcopy</title> 6 <link rel="stylesheet" type="text/css" href="Airbnb.css"> 7 <!-- Required meta tags --> 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 13 14 </head> 15 <body> 16 <header> 17 <div class="header-container"> 18 <img src="家.PNG" width="30px" height="30px"> 19 <div class="search"> 20 <img src="虫眼鏡.PNG" hspace="10px" width="15px" height="15px" > 21 <input type="search" class="searching" value="探す"> 22 </div> 23 <ul class="select"> 24 <li><a class="link" href="#">ホストをはじめる</a></li> 25 <li><a class="link" href="#">ヘルプ</a></li> 26 <li><a class="link" href="#">登録する</a></li> 27 <li><a class="link" href="#">ログイン</a></li> 28 </ul> 29 </div> 30 <div class="alert alert-warning alert-dismissible fade show" role="alert"> 31 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 32 <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 33 <span aria-hidden="true">×</span> 34 </button> 35</div> 36 37 <div class="main"> 38 <div class="middle"> 39 <H1>旅を贈ろう。</H1> 40 <H3>Airbnbギフトカードで、世界をぐんと身近に</H3> 41 </div> 42 43 </div> 44 45 46 </header> 47
CSS
1コード 2.logo { 3 float: left; 4} 5 6.home { 7 padding-top: 5px; 8} 9 10.glass { 11 size: 10%; 12} 13 14.header-container { 15 padding: 25px; 16 padding-bottom:15px; 17 height: 50px; 18} 19 20.header-container { 21 display : flex; 22} 23 24.select { 25 text-align: right; 26 color: red; 27 font-size: 100px; 28} 29 30.selector { 31 color : red; 32} 33 34.link { 35 color: black; 36 margin-left: 15px; 37 text-align: left; 38 text-decoration: none; 39} 40 41.search { 42 padding-top: 10px;
回答1件
あなたの回答
tips
プレビュー