html - 如何水平显示元素-6ren

html - 如何水平显示元素

转载作者：太空宇宙更新时间：2023-11-04 06:09:51

我有一个产品 View ，我希望它们水平显示，但它们垂直显示。

它们的显示方式:

x
x
x
x

我想如何显示它们:

x x x
x x x
x x x

我试过 display: inline-block，但没用。

ListView :

<body>
    <header></header>
    <main role="main">
        @await Html.PartialAsync("Carousel")
        <div class="container">
            <h2 class="text-center" style="color:#5095b7; font-style:oblique">@Model.CurrentCategory</h2>
            <div class="row">
                <div class="col-lg-2">
                    <div class="list-group">
                        @await Component.InvokeAsync("CategoryMenu")
                    </div>
                </div>
                <div class="col-lg-10">
                    @foreach (Product product in Model.Products)
                    {
                        @await Html.PartialAsync("ProductSummary", product)
                    }
                </div>
            </div>
        </div>
    </main>
</body>

ProductSummary 部分 View :

@model Product
<div class="row">
    <div class="col-lg-4">
        <div class="card h-100">
            <a><img class="card-img-top" src="@Model.ImageThumbnailUrl" alt=""></a>
            <div class="card-body">
                <h4 class="card-title">
                    <a asp-controller="Product" asp-action="ProductDetails" asp-route-drinkId="@Model.ProductId">@Model.Name</a>
                    <a class="float-right">@Model.Price$</a>
                </h4>
                <p class="card-text">@Model.ShortDescription</p>
            </div>
            <div class="card-footer">
                <div class="add-to-Cart text-right">
                    <a class="btn btn-success" id="cartButton"
                       asp-controller="ShoppingCart"
                       asp-action="AddToShoppingCart"
                       asp-route-productId="@Model.ProductId">
                        Add to cart
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

最佳答案

您可以为您的容器使用 flex 布局，并在部分 View 中为您的元素删除 class="row"。

ListView :

<body>
<header></header>
<main role="main">
    @await Html.PartialAsync("Carousel")
    <div class="container">
        <h2 class="text-center" style="color:#5095b7; font-style:oblique">@Model.CurrentCategory</h2>
        <div class="row">
            <div class="col-lg-2">
                <div class="list-group">
                    @await Component.InvokeAsync("CategoryMenu")
                </div>
            </div>
            <div class="col-lg-10" style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;justify-content:space-between">
                @foreach (Product product in Model.Products)
                {
                    @await Html.PartialAsync("ProductSummary", product)
                }
            </div>
        </div>
    </div>
</main>

ProductSummary 部分 View :

@model Product
@*<div class="row"> remove this line*@
<div class="col-lg-4">
    <div class="card h-100">
        <a><img class="card-img-top" src="@Model.ImageThumbnailUrl" alt=""></a>
        <div class="card-body">
            <h4 class="card-title">
                <a asp-controller="Product" asp-action="ProductDetails" asp-route-drinkId="@Model.ProductId">@Model.Name</a>
                <a class="float-right">@Model.Price$</a>
            </h4>
            <p class="card-text">@Model.ShortDescription</p>
        </div>
        <div class="card-footer">
            <div class="add-to-Cart text-right">
                <a class="btn btn-success" id="cartButton"
                   asp-controller="ShoppingCart"
                   asp-action="AddToShoppingCart"
                   asp-route-productId="@Model.ProductId">
                    Add to cart
                </a>
            </div>
        </div>
    </div>
</div>
@*</div>*@

关于html - 如何水平显示元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56516533/

文章推荐： java - Eclipse 不断分割我的测试注释

文章推荐： c++ - 关于多线程程序的查询

文章推荐： c - 如何将 float 转换为无符号变量？

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何水平显示元素