并排放置div

问题描述

<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的内容的完整宽度和右边距并排放置。

我得到如下输出

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

解决方法

“我需要输出文本将在一行中。”这是一行中的所有内容。基本上，您只需要white-space: nowrap。我删除了div包裹每个li的多余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>

在网格布局中，必须将内容放置在列（.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>

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;
}

改为尝试

首先删除，

中的所有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使内联。有关white-space
的更多信息

所有<li>通过display:inline-bock进行内联。有关display
的更多信息

.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>

html twitter-bootstrap