前提・実現したいこと
width:33.3333%をつかって3カラム?レイアウトにしたい
このようにしたい
発生している問題・エラーメッセージ
marginなどをつけたら上に二段 下に1段になってしまう [このように崩れてしまう](https://gyazo.com/32b75bd9e9973f1849b596106b648fab)
該当のソースコード
html
1<article> 2 <section class="services"> 3 <ul> 4 <li> 5 <img src="system/img/icon1.png" alt=""> 6 <h2>Officia Deserunt Mollit</h2> 7 <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua voluptate velit esse cillum dolore</p> 8 </li> 9 <li> 10 <img src="system/img/icon2.png" alt=""> 11 <h2>Culpa Killum Dolore</h2> 12 <p>aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 13 </li> 14 <li> 15 <img src="system/img/icon3.png" alt=""> 16 <h2>Elit Tempor Incididunt</h2> 17 <p>nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat enim ad minim veniam.</p> 18 </li> 19 </ul> 20 </section> 21 22</article>
css
1 2article { 3 width: 100%; 4 padding: 0 10% 0 10%; 5} 6 7.services { 8 width: 100%; 9} 10 11.services ul { 12 margin-top: 100px; 13 width: 100%; 14} 15 16@media only screen and (min-width:800px) { 17 .services ul { 18 width: 100%; 19 } 20} 21 22.services ul li { 23 width: 100%; 24 display: inline-block; 25 text-align: center; 26 vertical-align: top; 27} 28 29@media only screen and (min-width:800px){ 30 .services ul li { 31 width:23%; 32 display: inline-block; 33 text-align: center; 34 margin-left: 80px; 35 } 36} 37 38 39 40/* @media only screen and (min-width:800px){ 41 .services ul li:first-child { 42 margin-left: 3%; 43 } 44} */ 45 46.services ul li h2 { 47 color: #616161; 48 font-size: 16px; 49 font-weight: 700; 50 margin-top: 60px; 51} 52 53@media only screen and (min-width:800px){ 54 .services ul li h2 { 55 color: #616161; 56 font-size: 18px; 57 font-weight: 700; 58 margin-top: 60px; 59 } 60} 61 62.services ul li p { 63 color: #838181; 64 font-size: 14px; 65 line-height: 28px; 66 letter-spacing: .5px; 67 margin-top: 40px; 68 margin-bottom: 100px; 69}
試したこと
border?が関係してるのかなと思いborderを0にしたが関係なかったり
marginをなくして width33.3333にしてみたりした。
margin-leftをなくすと文と文の間がなくなってしまうので間もつけて3つならべたい
補足情報(FW/ツールのバージョンなど)
あまりこのサイトの使い方がわかっておりませんので追加しないといけないことなのあれば教えてください
今現在width23%のところを33.3333にしてうまくいくようにしたいです
回答1件
あなたの回答
tips
プレビュー