如何将`div`放在`li`所在的同一行?

时间:2017-06-16 10:00:44

标签: html css html5 css3 flexbox

div {
  margin: 0px;
  padding: 0px;
  min-height: 1em;
}

.row {
  display: flex;
  flex-direction: row;
  border-style: solid;
  border-width: 1px;
  border-color: green;
}

.column1 {
  width: 30%;
  border-right-style: solid;
  border-width: 1px;
  border-color: green;
}

.column2 {
  width: 70%;
}
<ol>
  <li>
    <div class="row">
      <div class="column1"></div>
      <div class="column2"></div>
    </div>
  </li>
  <li>
    <div>
      <span></span>
    </div>
  </li>
</ol>

在该示例中,我的div元素位于下一行:

enter image description here

但我需要它们位于li号码所在的同一行。即我需要这样的结果:

enter image description here

如何获得我需要的结果?

4 个答案:

答案 0 :(得分:1)

无需使用列表:

.row {
  display: table;
  border-collapse: collapse;
  margin-bottom: 1em;
  counter-increment: myIndex;
}

.row:before {
  content: counter(myIndex) ".\00A0";
}

.row div {
  display: table-cell;
  border: 1px solid green;
}

.column1 {
  width: 30%;
}

.column2 {
  width: 70%;
}
<div class="row">
  <div class="column1"></div>
  <div class="column2"></div>
</div>

<div class="row">
  <div class="column1"></div>
  <div class="column2"></div>
</div>

答案 1 :(得分:1)

我建议您在display: inline-flex上更改为row

还建议在flex项目上使用flex属性(请参阅CSS中的注释)

为了让你的CSS更加苗条,我还删除了一些不需要的属性(他们设置的那个属性是他们的默认属性),例如div上的填充/边距,flex- row上的方向,并使用border

的简写版本

&#13;
&#13;
div {
  min-height: 1em;
}
.row {
  display: inline-flex;           /*  changed  */
  width: 100%;                    /*  added    */
  border: 1px solid green;
  box-sizing: border-box;         /*  added, make border size be within set width  */
}
.column1 {
  flex-basis: 30%;                /*  changed  */
  border-right: 1px solid green;
}
.column2 {
  flex-grow: 1;                   /*  changed, take remaining space  */
}
&#13;
<ol>
  <li>
    <div class="row">
      <div class="column1"></div>
      <div class="column2"></div>
    </div>
  </li>
  <li>
    <div>
      <span></span>
    </div>
  </li>
</ol>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这里:

您需要为行元素添加width和float属性。

.row {
    display: flex;
    flex-direction: row;
    border-style: solid;
    border-width: 1px;
    border-color: green;
    width: 100%;
    float: left;
}

这准确地给出了所需的结果。您可能需要在CSS中阅读有关float属性的更多信息。它将在项目的其余部分为您提供很多帮助。

答案 3 :(得分:0)

我添加了一个“包装器”,以便我可以使用display:inline-block;设置它。我认为它会转到下一行,因为div是一个块元素,因此它转到了下一行

div {
  margin: 0px;
  padding: 0px;
  min-height: 1em;
}

.wrapper {
  width: 100%;
  display: inline-block;
}

.row {
  display: flex;
  flex-direction: row;
  border-style: solid;
  border-width: 1px;
  border-color: green;
}

.column1 {
  width: 30%;
  border-right-style: solid;
  border-width: 1px;
  border-color: green;
}

.column2 {
  width: 70%;
}
<body>
  <ol>
    <li>
      <div class="wrapper">
        <div class="row">
          <div class="column1"></div>
          <div class="column2"></div>
        </div>
      </div>
    </li>
    <li>
      <div>
        <span></span>
      </div>
    </li>
  </ol>
</body>