疑問点
※「該当のソースコード」のCSSコードから抜粋
CSS
1.input-wrap { 2 display: table; 3 width: 100%; 4 white-space: nowrap; 5 table-layout: fixed; 6}
.input-wrapperのtable-layout: fiexedにすると、input-wrapperが左によります。
しかし、なぜそうなるのかわかりません。
table-layout:fixed;の働き自体は理解しているつもりです。
まだまだ初心者なので、初歩的な質問なのかもしれません。
ご返答お願いいたします。
ちなみにFontawesomeのアイコンがあるのですが、構いませんでしょうか?
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 8<!-- Fontawesome CSS --> 9 <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"> 10 11 <title>Document</title> 12</head> 13<body> 14 <header> 15<!-- brand --> 16 <a href=""> 17 <div class="brand"> 18 <div class="brand-inner"> 19 <i class="fab fa-500px" aria-hidden="true" focusable="false" style="display:block; fill:currentcolor; height:34px; width:34px;"></i> 20 </div> 21 </div> 22 </a> 23 24<!-- search-form --> 25 <label for="" class="input-wrap"> 26 <div class="i-box"> 27 <i class="fas fa-search" style="display:block; fill:currentcolor; height:18px; width:18px"></i> 28 </div> 29 30 <div class="input-box-a"> 31 <div class="input-box-z"> 32 <input type="text", aria-autocomplete="list", aria-describedly="", aria-expanded="false", autocomplete="off", autocorrect="off", spellcheck="false", name="query", placeholder="探す", role="", value> 33 </div> 34 </div> 35 </label> 36 </header> 37 38 <!-- Optional JavaScript --> 39 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 40 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 41 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 42 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 43</body> 44</html>
CSS
1/* reset.css */ 2html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, i, svg{ 3 margin: 0; 4 padding: 0; 5 border: 0; 6 font-weight: normal; 7 font-size: 100%; 8 vertical-align:baseline; 9 -webkit-box-sizing: border-box; 10 -moz-box-sizing: border-box; 11 box-sizing: border-box; 12} 13article, header, footer, aside, figure, figcaption, nav, section { 14 display:block; 15} 16body { 17 line-height: 1; 18 -ms-text-size-adjust: 100%; 19 -webkit-text-size-adjust: 100%; 20/* background-color: #000; */ 21} 22ol, ul { 23 list-style: none; 24 list-style-type: none; 25} 26 27/* brand */ 28a { 29 display: table-cell; 30 text-decoration: none; 31 color: inherit; 32 border: 2px solid blue; 33} 34 35header { 36 display: table; 37 width: 100%; 38 border-spacing: 0px; 39} 40 41.brand { 42 display: table-cell; 43 vertical-align: middle; 44 padding: 0 24px; 45 position: relative; 46 height: 80px; 47} 48 49.brand-inner { 50 display: inline-block; 51 color: #F5194B; 52 font-size: 34px; 53} 54 55/* input-wrapper */ 56.input-wrap { 57 display: table; 58 width: 100%; 59 white-space: nowrap; 60 table-layout: fixed; 61} 62.i-box { 63 background-color: #89888A; 64 display: table-cell; 65 vertical-align: middle; 66 width: 39px; 67 padding-left: 5px; 68 padding-right: 10px; 69 padding-top: 3px; 70} 71i:not(:root) { 72 overflow: hidden; 73} 74.input-box-a { 75 display: table-cell; 76 vertical-align: middle; 77 position: relative; 78} 79.input-box-z { 80 display: block; 81 position: relative; 82 overflow: hidden; 83} 84
試したこと
※「該当のソースコード」のCSSコードから抜粋
CSS
1.input-wrap { 2 display: table; 3 width: 100%; 4 white-space: nowrap; 5 table-layout: fixed; 6}
.input-wrapperのtable-layout: fiexedにすると、
となります。ちなみにwidth: 100%;を無くしてもこうなります。
青のボーダーはHTMLコード内のbrandのaタグになります。
table-cellのおかげで自動的になる仕様なのでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/24 13:00
2019/03/24 13:10
2019/03/25 01:15
2019/03/25 02:14
2019/03/26 04:09