並排放置div

Question

我的 HTML 代碼如下

<div class="col-lg-4">
    <ul>
        <div class="area" id="div_1">
            <li class="category" id="1">Hair</li>            
        </div>
        <div class="area" id="div_3">
            <li class="category" id="3">Skin Care</li>            
        </div>
        <div class="area" id="div_4">
            <li class="category" id="4">Makeup</li>            
        </div>
        <div class="area" id="div_5">
            <li class="category" id="5">Body Treatments</li>            
        </div>
        <div class="area" id="div_6">
            <li class="category" id="6">Sports Massage</li>            
        </div>
        <div class="area" id="div_7">
            <li class="category" id="7">Physiotherapy</li>            
        </div>
        <div class="area" id="div_8">
            <li class="category" id="8">Intensive Healing Pedicure</li>            
        </div>
        <div class="area" id="div_9">
            <li class="category" id="9">Pedicure Refresher</li>            
        </div>
        <div class="area" id="div_10">
            <li class="category" id="10">Therapeutic Pedicure</li>            
        </div>
    </ul>
</div>

我的 CSS 代碼如下

.col-lg-4 > ul {
        overflow-x: scroll;
        width: 100%;
        display:flex;
    }

    .category {
        border:0;
        padding: 0;
        margin-right: 30px;
        font-size: 15px;
    }

我想將 div 與其內容的全寬和右側的一些邊距並排放置。

我得到如下輸出

我需要輸出文本在一行中。

Answer 1

“我需要輸出文本在一行中。” 這是一行中的所有內容。 基本上，您所需要的只是white-space: nowrap 。 我刪除了包裝每個li的div的額外 HTML，因為那是無效的 HTML 並且沒有必要。 如果您需要div ，請將它們放在li 。 不過我會讓它們變成span 。

 .col-lg-4>ul { overflow-x: scroll; width: 100%; display: flex; } .category { border: 0; padding: 0; margin-right: 30px; font-size: 15px; display: inline-block; white-space: nowrap; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> <div class="col-lg-4"> <ul> <li class="category" id="1">Hair</li> <li class="category" id="3">Skin Care</li> <li class="category" id="4">Makeup</li> <li class="category" id="5">Body Treatments</li> <li class="category" id="6">Sports Massage</li> <li class="category" id="7">Physiotherapy</li> <li class="category" id="8">Intensive Healing Pedicure</li> <li class="category" id="9">Pedicure Refresher</li> <li class="category" id="10">Therapeutic Pedicure</li> </ul> </div>

Answer 2

在網格布局中，內容必須放在列（.col 和 .col-*）內，並且只有列可以是行 (.row) 的直接子項。 行應放置在 .container 或 .container-fluid 內，以便正確填充和對齊。

  <div class="container">
        <!--Row with two equal columns-->
        <div class="row">
            <div class="col-md-6">Column left</div>
            <div class="col-md-6">Column right</div>
        </div>
    </div>

Answer 3

col-lg-4 的寬度僅為頁面的 25%。 因此，文本變得局促。 您可以將其更改為 col-lg-12 以占據整個頁面。

 .col-lg-12>ul { overflow-x: scroll; width: 100%; display: flex; } .category { border: 0; padding: 0; margin-right: 30px; font-size: 15px; }

Answer 4

試試這個，

首先刪除里面的所有div ,

然后，添加這個樣式，

.col-lg-4 > ul {
  overflow-x: scroll;
  white-space:nowrap;
  margin:0;
}

.category {
  margin-right: 30px;
  font-size: 15px;
  display:inline-block;
}

white-space:nowrap使排隊。 有關空白的更多信息

所有<li>都通過display:inline-bock進行內display:inline-bock 。 有關顯示的更多信息

 .col-lg-4 > ul { overflow-x: scroll; white-space:nowrap; margin:0; } .category { margin-right: 30px; font-size: 15px; display:inline-block; }

 <div class="col-lg-4"> <ul> <li class="category" id="1">Hair</li> <li class="category" id="3">Skin Care</li> <li class="category" id="4">Makeup</li> <li class="category" id="5">Body Treatments</li> <li class="category" id="6">Sports Massage</li> <li class="category" id="7">Physiotherapy</li> <li class="category" id="8">Intensive Healing Pedicure</li> <li class="category" id="9">Pedicure Refresher</li> <li class="category" id="10">Therapeutic Pedicure</li> </ul> </div>