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
元素位于下一行:
但我需要它们位于li
号码所在的同一行。即我需要这样的结果:
如何获得我需要的结果?
答案 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
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;
答案 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>