【发布时间】：2019-02-19 18:39:25
【问题描述】：
我的网页上的标签按以下模式排列：
主容器content 包含rows。一行中有两个labels，一个label 包含三个columns。每个column 可以包含一个或多个input["text"] 元素。
input {
width: 100%;
resize: vertical;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border: none;
background-color: transparent;
color: black;
outline: none;
font-weight: bold;
transition: ease-in-out, width .35s ease-in-out;
}
input:hover, input:focus {
background-color: #baffc9;
border-radius: 3px;
}
.label-row {
height: 3.0cm;
width: 18.8cm;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-wrap: nowrap;
}
.label {
border: 1px dashed black;
width: 9.4cm;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.col-left {
width: 4.4cm;
}
.col-middle {
width: 1.0cm;
border-left: 1px dotted black;
border-right: 1px dotted black;
}
.col-right {
width: 4.0cm;
}
/* ----- column-left ----- */
.hsig-wrapper {
flex-direction: column;
justify-content: space-evenly;
}
.hl {
font-size: 10px;
flex: 0 1 auto;
}
.sk {
font-size: 18px;
flex: 0 1 auto;
}
.format {
font-size: 18px;
flex: 0 1 auto;
}
.hsig {
font-size: 18px;
flex: 0 1 auto;
}
.sig_add {
font-size: 10px;
flex: 0 1 auto;
}
/* ----- column-middle ----- */
.loc-wrapper {
background-color: transparent;
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.loc {
font-size: 20px;
width: 2.9cm;
height: 0.9cm;
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
/* ----- column-right ----- */
.as-wrapper {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
align-items: center;
/*flex-wrap: nowrap;*/
/*justify-content: space-evenly;*/
}
.as_detail {
font-size: 18px;
width: 100%;
align-self: center;
flex: 0 1 auto;
width: 0.8cm;
/*height: 30%;*/
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}<div id="content">
<div class="label-row">
<div class="label">
<div class="col-left">
<div class="hsig-wrapper">
<input type="text" class="hl"
id="hl"
name="hl"
value="Headline">
<input type="text" class="format"
id="format"
name="format"
value="II">
<input type="text" class="hsig"
id="hsig"
name="hsig"
value="12 345">
<input type="text" class="sig_add"
id="sig_add"
name="sig_add"
value="Detail">
</div>
</div>
<div class="col-middle">
<div class="loc-wrapper">
<input type="text" class="loc"
id="loc"
name="loc"
value="ABC">
</div>
</div>
<div class="col-right">
<div class="as-wrapper">
<input type="text" class="as_detail"
id="as_detail_0"
name="as_detail_0"
value="1">
<input type="text" class="as_detail"
id="as_detail_1"
name="as_detail_1"
value="2">
<input type="text" class="as_detail"
id="as_detail_2"
name="as_detail_2"
value="3">
<input type="text" class="as_detail"
id="as_detail_3"
name="as_detail_3"
value="4">
</div>
</div>
</div>
</div>
</div>在liveweave 上几乎就是图中的全部问题。
问题：
- 唯一有效的列是 col-middle。
- 左边忽略
justify-content: space-evenly;。输入文本框不使用底部空间：我无法将Detail向下推到该行。 - 在右侧，我可以旋转输入文本框，但它们的尺寸太小了。我想将它们对齐在标签的中间（比如
locABC），但它们不会向下移动。每次我尝试增加它们的宽度（从 0.8 厘米到 0.9 厘米）时，对齐都会被破坏。
在这些情况下我该怎么办？我的 flexbox 模型是否复杂甚至完全错误？你有什么想法吗？
【问题讨论】：
标签： html css input flexbox css-transforms