css
1.header_logo{ 2 margin:10px; 3} 4.display_flex{ 5 6} 7.header_menu_wrap{ 8 display:flex; 9 align-items:center; 10} 11 12.header_menu{ 13 display:flex; 14 padding:0; 15 height:55px; 16 width:75%; 17 18} 19.header_menu li + li{ 20 border-left:1px solid #DDDDDD; 21} 22.header_menu li { 23 height:55px; 24 width:16.666%; 25 /* margin:10px 0; 26 padding:0 34px; */ 27 list-style:none; 28 font-family:'Quicksand',sans-serif; 29 /* text-align:center; 30 padding:20px; */ 31} 32 33 34.header_menu li a{ 35 text-decoration:none; 36 color:#666; 37 font-size:15px; 38 font-weight:bold; 39 display:table-cell; 40 vertical-align:middle; 41 text-align:center; 42 height:55px; 43 width:16.666%; 44 45} 46.header_menu li a:hover{ 47 color: #999; 48} 49.header_menu_ruby{ 50 color:#999; 51 margin:0; 52 font-size:10px; 53 font-weight:400; 54 55} 56 57 58 59 60.yoyaku_box a{ 61 text-decoration:none; 62 background-color:#FF9999; 63 color:#fff; 64 padding:14px 45px; 65 position:relative; 66 67} 68.yoyaku_box a:before{ 69 content:""; 70 width:20px; 71 height:20px; 72 background-image:url(img/common_sprite.png); 73 position:absolute; 74 background-size:110px; 75 top:15px; 76 left:17px; 77} 78 79
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>heair_salon</title> 6 <link rel="stylesheet" type="text/css" href="normalize.css" > 7 <link rel="stylesheet" type="text/css" href="heair_salon.css" > 8 <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 9</head> 10<body> 11 <header> 12 <div class="header_menu_wrap display_flex"> 13 <h1 class="header_logo"><a href="#"><img src="img/header_logo.webp" alt="blandlogo"></h1></a> 14 <ul class="header_menu display_flex" > 15 <li><a href="#">HOME<p class="header_menu_ruby">ホーム</P></a></li> 16 <li><a href="#">SALON<p class="header_menu_ruby">サロン検索</p></a></li> 17 <li><a href="#">SPECIAL<p class="header_menu_ruby">特集コンテンツ</p></a></li> 18 <li><a href="#">CATALOG<p class="header_menu_ruby">ヘアカタログ</p></a></li> 19 <li><a href="#">RECRUIT<p class="header_menu_ruby">採用情報</p></a></li> 20 <li><a href="#">CONCEPT<p class="header_menu_ruby">コンセプト</p></a></li> 21 </ul> 22 <p class="yoyaku_box "> 23 <a href="#">サロンからweb予約</a> 24 </p> 25 </div> 26 </header> 27</body> 28 29</html>
上記コードの、yoyaku_box内のaタグにwidth18%とし、全体の18%のwidthを与え、全体の横幅に対して背景色を18%分適応させたいと考えているのですが、aタグに対してwidthを設定しても適応されません。
aタグにwidthを設定するにはどのようにしたらよろしいでしょうか?
以下の画像は、上記コードを実行した際の画像となります。
回答3件
あなたの回答
tips
プレビュー