• 文字サイズ


解決済

商品をliタグで綺麗に並べたい

  • 相談者:非公開
  • 2020/10/14 18:12
いつもお世話になっております。
アイテムをliタグを使って3列に並べたいのですが、
ボタンを2列で設置したとき、flexがうまく効いておらず
縦がそろいません。
ボタンの方でposition: relative;を利用しているのが原因だとは思うのですが、
relativeを使わず、ボタンを2列に配置するのが難しく
手詰まり状態です。

何か解決策がございましたら、ご教示の程よろしくお願いいたします。


【ソースコード】
・HTML


<ul class="item-list">

<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"><span class="y"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/seiko-07/lukia-pair10_1.jpg"/></span></a>
<h4>タイトル</h4>
<p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>
<div class="btn-wrap btn-wrap-pc-sp2">
<a href="URL" class="btn btn--contact">
楽天市場で購入
</a>
<a href="URL" class="btn btn--tel">
PayPayモールで購入
</a>
</div>
</li>

<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"><span class="y"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/seiko-07/lukia-pair10_1.jpg"/></span></a>
<h4>タイトル</h4>
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<div class="btn-wrap btn-wrap-pc-sp2">
<a href="URL" class="btn btn--contact">
楽天市場で購入
</a>
<a href="URL" class="btn btn--tel">
PayPayモールで購入
</a>
</div>
</li>


<li><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"><span class="y"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/seiko-07/lukia-pair10_1.jpg"/></span></a>
<h4>タイトル</h4>
<p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>
<div class="btn-wrap btn-wrap-pc-sp2">
<a href="URL" class="btn btn--contact">
楽天市場で購入
</a>
<a href="URL" class="btn btn--tel">
PayPayモールで購入
</a>
</div>
</li>
</ul>


・CSS

ul.item-list {
width:1000px;
max-width: 100%;
margin:0px auto 20px;
padding:0;
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
text-align: center;
justify-content: center;
}


.flex > *:first-child > *{ width:100%; }

/*
ul.item-list li:first-child{
margin-right:4%;
}*/




ul.item-list li {
width:26.5%;
background: #fff;
list-style:none;
padding:1.5% 1.5% 2%;
margin:0 1.7% 20px;
position: relative;
}


ul.item-list li.big {
width:41.5%;
padding:1.5% 2.2% 2%;
}



ul.item-list li img {
width:100%;
margin:0;
padding:0;
}

@-moz-document url-prefix() {
ul.item-list li img {
width:100%;
margin:0;
padding:10px 0 0;
}
}


ul.item-list li h4 {
font-size:120%;
word-break: break-all;
text-align:center;
margin:5px 0;
padding:0;
}

ul.item-list li h4:before {
font-size:120%;
word-break: break-all;
text-align:center;
margin:5px 0;
padding:0;
}

@media screen and (max-width:639px){

ul.item-list li h4 {
font-size:95%;
padding:0;
margin:2% 0 0;
}
}





ul.item-list li p {
padding:0 0 25px;
font-size:15px;
line-height:160%;
letter-spacing:normal;
}


@-moz-document url-prefix(){
ul.item-list li p {
padding:0 5% 65px;

}
}

@media screen and (max-width:639px){

}


ul.item-list li p.cart a {
width:90.5%;
background: #000;/* チェックボタンの色 */
border-bottom:2px solid #619BC0;/* チェックボタンの下線色 */
text-align:center;
padding:8px 0;
margin:0;
position: absolute;
bottom: 15px;
color: #fff;/* チェックボタンの文字色 */
font-size: 100%;
}


ul.item-list li p.cart a:hover {
color: #fff;
background:#036ecf;
}

@media screen and (max-width:639px){

ul.item-list {
width:100%;
margin:0 auto 0px;
padding:0;
}


ul.item-list li {
width:100%;
list-style:none;
padding-bottom:30px;
margin:0 1% 15px;
}


ul.item-list li.big {
width:90%;
padding:1.5% 2.2% 5%;
}

ul.item-list li p {
margin:0;
padding:0 2% 5%;
font-size:12px;
}


ul.item-list li p.cart a {
width:92%;
padding:8px 0;
margin:0;
position: absolute;
bottom:2%;
left:3%;
font-size: 100%;
}}


.btn,
a.btn,
button.btn {
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
bottom: 15px;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}

.btn-wrap-pc-sp {
max-width: 435px;
margin: 0 auto 20px;
}

a.btn-pc-sp {
line-height: 1.4;
width: 49.5%;
padding: 1.25rem 0;
color: #ffff;
}

a.btn--contact {
display: block;
padding: 1rem 0;
color: #fff;
background: #bf0000;
}

a.btn--contact i {
font-size: 2rem;
}

a.btn--contact i.fa-position-left {
font-size: 3rem;

left: 2rem;
}

a.btn--contact :hover {
color: #fff;
}

a.btn--tel {
display: block;
margin-top: 15px;
padding: 1rem 0;
color: #fff;
background: #9a812e;
}

a.btn--tel i {
font-size: 2rem;
}

a.btn--tel i.fa-position-left {
font-size: 3rem;
left: 2rem;
}

a.btn--tel .number {
line-height: 1;
display: inline-block;
margin-top: 0.5rem;
padding: 0.25rem 2rem;
letter-spacing: 0;
color: #094;
border-radius: 0.5rem;
background: #fff;
}

a.btn--tel:hover {
color: #fff;
}

.fa-position-left {
position: absolute;
top: calc(50% - 0.5em);
left: 1rem;
}

.fa-position-right {
position: absolute;
top: calc(50% - 0.5em);
right: 1rem;
}
投稿内容について報告する
広告0円でアクセスと売上アップできる
今年4月から毎週オンラインにて開催し、これまでに1200社以上が参加された 90分で学べる楽天集客対策セミナーを11月6日(金)に開催します。 初めての参加で満足できるか不安な方には返金保証もお付けしております。 ぜひこの機会にご参加ください。

  • 返信者:非公開
  • 2020/10/14 19:06
ECマスターズの田中です。

<li>の中もflexで整理するのはいかがでしょうか。
縦方向のflexboxとして、テキスト部分のみを高さ可変にすることで………(省略)………
  • 返信者:非公開(質問者)
  • 2020/10/15 10:37
ありがとうございます!
解決いたしました!………(省略)………