• 文字サイズ


解決済

商品を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;
}
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

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

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