跨度内两列以上的列

Question

我需要一个包含值列表的面板。每个值都有一个标签。标签必须显示在值的上方。每个标签必须在左侧对齐。

它必须看起来像这样：

Label 1  Label 2 
Value 1  Value 2 

这里是我的代码 - plnkr

<div> 
    <span> 
    <span class="a">title 1</span> 
    <input type="text" class="b" /> 
    </span> 
    <span> 
    <span class="c">title 2</span> 
    <input class="d" /> 
    </span> 
</div> 

CSS：

span.a { 
    color: red; 
} 

input.b { 
    display: block; 
} 

span.c { 
    color: blue; 
} 

input.d { 
    display: block; 
} 

什么是解决它的最好方法？

Answer 1

CSS表是一个选项（如果不能使用实际的table）

.table { 
 
    display: table; 
 
} 
 
.col { 
 
    display: table-cell; 
 
} 
 
.col > * { 
 
    display: block; 
 
}

<div class="table"> 
 
    <span class="col"> 
 
    <span class="a">title 1</span> 
 
    <input type="text" class="b" /> 
 
    </span> 
 
    <span class="col"> 
 
    <span class="c">title 2</span> 
 
    <input class="d" /> 
 
    </span> 
 
</div>

Answer 2

你可以试试flex布局。

这里是一个例子。

如果您希望您的跨度元素缠绕在较小的屏幕上，请将flex-flow: row wrap添加到.wrapper类。

/* Styles go here */ 
 

 
.wrapper { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
} 
 

 
.flex-item { 
 
    margin: 0 10px; 
 
} 
 

 
span.a { 
 
    color: red; 
 
} 
 

 
input.b { 
 
    color: green; 
 
    display: block; 
 
} 
 

 
span.c { 
 
    color: blue; 
 
} 
 

 
input.d { 
 
    color: black; 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <span class="flex-item"> 
 
    <span class="a">title 1</span> 
 
    <input type="text" class="b" /> 
 
    </span> 
 
    <span class="flex-item"> 
 
    <span class="c">title 2</span> 
 
    <input class="d" /> 
 
    </span> 
 
    <span class="flex-item"> 
 
    <span class="c">title 3</span> 
 
    <input class="d" /> 
 
    </span> 
 
</div>

Answer 3

正如我在评论中说，我写出来的例子为更好的可读性：

div > span { 
    display: block; 
    width: 200px; /* Could be any with you desire */ 
    float: left; 
} 

难道这就是你的意思是：https://plnkr.co/edit/4epj5b53JYlJMVZbudJb?p=preview