一宮市のホームページ制作Y desIgn

横並びCSSの組み方(float無し)

2018.09.18 Tue

Table of Contents

単純な横並び(折り返し無し)

パターン1

inline-blockを追加

</p><style>.demo ul.style1{
	letter-spacing: -0.4em;
}
.demo ul.style1 li{
	letter-spacing: normal;
	display: inline-block;
}</style><p><style><br />
.demo ul.style1{<br />
letter-spacing: -0.4em;<br />
}<br />
.demo ul.style1 li{<br />
letter-spacing: normal;<br />
display: inline-block;<br />
}<br />
</style></p>
<div class="demo">
<ul class="style1">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>
<p>

ulのletter-spacing: -0.4em;でliの左右に空く余白を文字の間隔を詰めることで打ち消しています。
liのletter-spacing: normal;で詰めた文字の間隔をリセットしています。

inline-blockを追加 (幅指定・横方向の中央揃え)

</p><style>.demo ul.style2{
	letter-spacing: -0.4em;
}
.demo ul.style2 li{
	letter-spacing: normal;
	display: inline-block;
	width: 33.333%;
	text-align:center;
}</style><p><style><br />
.demo ul.style2{<br />
letter-spacing: -0.4em;<br />
}<br />
.demo ul.style2 li{<br />
letter-spacing: normal;<br />
display: inline-block;<br />
width: 33.333%;<br />
text-align:center;<br />
}<br />
</style></p>
<div class="demo">
<ul class="style2">
<li>左のテキスト</li>
<li>中央のテキスト</li>
<li>右のテキスト</li>
<li>左のテキスト</li>
<li>中央のテキスト</li>
</ul>
</div>
<p>

パターン2

横並びにする部分の親要素にdisplay:table、横並びの要素にdisplay:table-cell

【注意】折り返しません。

</p><style>.demo ul.style3{
	    display: table;
}
.demo ul.style3 li{
	    display: table-cell;
}</style><p><style><br />
.demo ul.style3{<br />
display: table;<br />
}<br />
.demo ul.style3 li{<br />
display: table-cell;<br />
}<br />
</style></p>
<div class="demo">
<ul class="style3">
<li>左のテキスト</li>
<li>中央のテキスト</li>
<li>右のテキスト</li>
</ul>
</div>
<p>

横並びにする部分の親要素にdisplay:table、横並びの要素にdisplay:table-cell

色付けしてみました

【注意】折り返しません。

</p><style>ul.style4{
	    display: table;
	    width: 100%;
}
.demo ul.style4 li{
	    display: table-cell;
	    background-color:#DADADA;
	    position: relative;
	    width: 33.333333%;
	    line-height:50px;
	    height:50px;
	    text-align:center;
}
.demo ul.style4 li:after{
	    width:1px;
	    height:50px;
	    background-color:#FFFFFF;
	    right:0;
	    top:0;
	    bottom:0;
	    content:"";
	    display: block;
	    position: absolute;
}
.demo ul.style4 li:last-child:after{
	    display: none;
}</style><p><style><br />
ul.style4{<br />
display: table;<br />
width: 100%;<br />
}<br />
.demo ul.style4 li{<br />
display: table-cell;<br />
background-color:#DADADA;<br />
position: relative;<br />
width: 33.333333%;<br />
line-height:50px;<br />
height:50px;<br />
text-align:center;<br />
}<br />
.demo ul.style4 li:after{<br />
width:1px;<br />
height:50px;<br />
background-color:#FFFFFF;<br />
right:0;<br />
top:0;<br />
bottom:0;<br />
content:"";<br />
display: block;<br />
position: absolute;<br />
}<br />
.demo ul.style4 li:last-child:after{<br />
display: none;<br />
}<br />
</style></p>
<div class="demo">
<ul class="style4">
<li>左のテキスト</li>
<li>中央のテキスト</li>
<li>右のテキスト</li>
</ul>
</div>
<p>

パターン3

横並びにする部分の親要素にdisplay: flex

li:beforeの部分は分かり易く装飾しているだけで特には不要な部分です。

</p><style>ul.style5{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-left:1px solid #383838;
    border-top:1px solid #383838;</p>
<p>}
.demo ul.style5 li{
	    flex-basis: 33.333%;
	    width: 33.333%;
	    text-align:center;
	    position: relative;
	    padding:25px 0 ;
	    border-bottom:1px solid #383838;
}
.demo ul.style5 li:before{
	    width:1px;
	    height:100%;
	    background-color:#383838;
	    right:0;
	    left:auto;
	    top:0;
	    bottom:0;
	    content:'';
	    display: block;
	    position: absolute;
}</style><p><style><br />
  ul.style5{<br />
  display: flex;<br />
  flex-direction: row;<br />
  justify-content: flex-start;<br />
  flex-wrap: wrap;<br />
  border-left:1px solid #383838;<br />
  border-top:1px solid #383838;<br />
}<br />
  .demo ul.style5 li{<br />
  flex-basis: 33.333%;<br />
  width: 33.333%;<br />
  text-align:center;<br />
  position: relative;<br />
  padding:25px 0 ;<br />
  border-bottom:1px solid #383838;<br />
  }<br />
  .demo ul.style5 li:before{<br />
  width:1px;<br />
  height:100%;<br />
  background-color:#383838;<br />
  right:0;<br />
  left:auto;<br />
  top:0;<br />
  bottom:0;<br />
  content:”;<br />
  display: block;<br />
  position: absolute;<br />
  }<br />
  </style></p>
<div class="demo">
<ul class="style5">
<li>左のテキスト</li>
<li>右のテキスト</li>
<li>中央のテキスト</li>
<li>左のテキスト</li>
<li>中央のテキスト</li>
<li>右のテキスト</li>
<li>左のテキスト</li>
</ul>
</div>
<p>

Warning: Invalid argument supplied for foreach() in /home/xs208195/y-dsn.com/public_html/wordpress/wp-content/themes/ydsn2023/functions.php on line 264