###前提・実現したいこと
ページの4つのボタンが少し右にずれ込んでしまっています。
これをちゃんと真ん中あたりに収まるように動かしたいです
###発生している問題・エラーメッセージ
![
右より左側の間隔があいてしまっています。
###該当のソースコード
html
1<div id="wrapper"><input id="tab-1" name="switch" type="radio" /> 2<input id="tab-2" name="switch" type="radio" /> 3<input id="tab-3" name="switch" type="radio" /> 4<input id="tab-4" name="switch" type="radio" /> 5<input id="tab-5" name="switch" type="radio" /> 6<ul class="tabBtn"> 7 <li><label for="tab-1">基本情報</label></li> 8 <li><label for="tab-2">PR</label></li> 9 <li><label for="tab-3">保証条件</label></li> 10 <li><label for="tab-4">採用条件</label></li> 11</ul> 12<div class="tabContents"><section><figure><figcaption> 13<table style="height: 220px; border-color: #ffaf03; background-color: #fffce0;" border="2"> 14<tbody> 15<tr style="height: 25px;"> 16<td style="height: 25px; text-align: center;">店舗名</td> 17<td style="width: 308.1139831542969px; height: 25px;"></td> 18</tr> 19<tr style="height: 23px;"> 20<td style="width: 159.88601684570313px; text-align: center; height: 23px;">到着駅</td> 21<td style="width: 308.1139831542969px; height: 23px;"></td> 22</tr> 23<tr style="height: 23px;"> 24<td style="width: 159.88601684570313px; text-align: center; height: 23px;">営業時間</td> 25<td style="width: 308.1139831542969px; height: 23px;"></td> 26</tr> 27</tbody> 28</table> 29</section></div>
css
1/* :::::: button :::::: */ 2 3.tabBtn { 4 display: table; 5 width: 100%; 6 margin: 0 0 1px; 7 padding: 0; 8} 9 10.tabBtn li { 11 display: table-cell; 12 width: 20%; 13 border-right: 1px solid #fff; 14 background-color: #20b2aa; 15 text-align: center; 16 vertical-align: middle; 17} 18 19.tabBtn li:last-child { 20 border-right: 0; 21} 22 23.tabBtn li label { 24 display: block; 25 cursor: pointer; 26 padding: 10px 0; 27 color: #fff; 28 transition: background-color .3s; 29} 30 31.tabBtn li label:hover { 32 background-color: rgba(205,92,92,.5); 33} 34 35/* :::::: contents :::::: */ 36 37.tabContents { 38 position: relative; 39} 40 41.tabContents section { 42 box-sizing: border-box; 43 -moz-box-sizing: border-box; 44 width: 100%; 45 padding: 20px; 46 background-color: #fff; 47} 48 49.tabContents figure { 50 overflow: hidden; 51} 52 53.tabContents figure img { 54 float: left; 55 max-width: 50%; 56 margin-right: 20px; 57} 58 59.tabContents figcaption { 60 font-size: 12px; 61 line-height: 1.8; 62}
###試したこと
こちらのサイトのコードを参考にしました。
余白であるpaddingなどをいじったのですが、うまくいきません。
###補足情報(言語/FW/ツール等のバージョンなど)
wordpress4.7
テーマ:chocolate
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/12 03:40
2017/01/12 04:33