LoginSignup
@kencellarafood

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

【CSS】ulタグの写真を横並べにしたいです

Q&A

Closed

HTMLCSSプログラミングタグサイト制作

解決したいこと

ulタグの中の写真を横並べにしたいのですが、displayを使うと上手くできません…。
該当箇所としては、「photo-4culums」の3枚の写真となります。
どなたか教えていただけると助かります。

現状のコード（HTML）

<!--photo 4culums-->
                <section class="photo-4culums">
                    <ul>
                        <li><img src="img/recipe1.jpg" alt=""></li>
                        <li><img src="img/recipe2.jpg" alt=""></li>
                        <li><img src="img/recipe3.jpg" alt=""></li>
                    </ul>
                </section>
                
                <!--more recipe site-->
                <section class="more-recipe">
                    <p><a rel="index.html">レシピ一覧を見る</a></p>
                </section>

現状のコード（CSS）

/*-----------------------------
photo 4culums
-----------------------------*/

/*
.photo-4culums {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
*/

.photo-4culums {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 80px;
}

.photo-4culums li {
    width: calc(100%/3);
}

.photo-4culums li img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center;
    padding: 5px 5px;
}

@media (max-width:840px) {
    .photo-4culums {
        flex-wrap: wrap;
    }

    .photo-4culums li {
        width: 100%;
    }
    
}

現状の状況

スクリーンショット 2023-12-04 093324.png

理想の実装後の状況

スクリーンショット 2023-12-04 093337.png

0 likes

3Answer

maffy_mf3
@maffy_mf3
style.css
- .photo-4culums {
+ .photo-4culums > ul {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 80px;
}

このように、sectionでなく、その下層のulを指定してあげると考えられているようになります！

【完成した例】
https://codepen.io/masa_mf3/pen/KKJrepa

0Like

Comments

  1. @kencellarafood

    Questioner

    解決致しました！ありがとうございます。

albireo
@albireo

たぶん最小構成

<html>
	<body>
		<ul style="list-style: none;">
			<section style="display: flex;">
				<li><div style="background-color: blue; width: 48px; height: 48px;"/></li>
				<li><div style="background-color: yellow; width: 48px; height: 48px;"/></li>
				<li><div style="background-color: red; width: 48px; height: 48px;"/></li>
			</section>
		</ul>
	</body>
</html>

階層がsection->ul->liだとdisplay: flexの対象となるのはulの方で、liに対しては効かないというのがポイントですね。

0Like

Comments

  1. @maffy_mf3

    [ul]下に[section]を入れ子にすることは、推奨されていません。
    最小構成であれば、[section]は無くてもいいのではと！
    [ul]に幅を指定したい場合、[ul]を[secction]で囲むと良いと思います。

    index.html
    <ul style="list-style: none; display: flex;">
    <li><div style="background: blue; width: calc(100vw/3); height: 48px;"/></li>
	<li><div style="background: yellow; width: calc(100vw/3); height: 48px;"/></li>
	<li><div style="background: red; width: calc(100vw/3); height: 48px;"/></li>
</ul>

Your answer might help someone💌

LoginSign Up