Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8732

div 枠を付ける、ボックスを並べる、フレックスボックス

$
0
0

枠を付ける

<div style="
text-align: center; /* 文字を中央揃え/* 
padding-top:15px; /* 上の余白15px/* 
padding-bottom:15px;/* 下の余白15px/* 
background-color:#333333;
color: white;
margin: 0 20px 0 20px;/* 余白 上 下 右 左/* 
">
                メディア掲載実績
            </div>

ボックスを並べる

 ul {
                padding: 0;
                justify-content: center;
                background-color: red;
                display: -webkit-flex;
                display: flex;
                list-style: none; /*黒点非表示/*
                flex-wrap: wrap; /端で折り返す/*
            }

 li {
                padding:5px;
                margin: 5px;
                background-color: white;
            }



 <div class="media-jisseki">


                <ul>
                    <li>
                        リスト1
                    </li>
                    <li>
                        リスト2
                    </li>
                    <li>
                        リスト3
                    </li>
                    <li>
                        リスト4
                    </li>
                    <li>
                        リスト5
                    </li>
                </ul> 



            </div>

スタイル指定

.media-jisseki {

 background-color:#F5F5F5;padding-top:15px;padding-bottom:15px;margin: 0 20px 0 20px;
            }

class="media-jisseki"
で使える。


Viewing all articles
Browse latest Browse all 8732

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>