跨度內兩列以上的列

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