На моей веб-странице есть метки, которые расположены по следующему шаблону: Основной контейнер 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 - это почти вся изображенная проблема.
Проблема:
- Единственный работающий столбец - это середина столбца.
- Слева игнорируется
justify-content: space-evenly;.Текстовые поля ввода не используют нижний пробел: я не мог толкнуть Detail вниз к строке. - В правом столбце я мог вращать текстовые поля ввода, но их размер слишкоммаленький.Я хотел выровнять их по центру надписи (например,
loc ABC), но они не будут двигаться вниз.Каждый раз, когда я пытался увеличить их ширину (с 0,8 см до 0,9 см), выравнивание нарушалось.
Что я могу сделать в этих случаях?Моя модель flexbox слишком сложна или даже построена неправильно?У вас есть идея?