Фиксация ширины элементов внутри дисплея div в виде таблицы

У меня проблема с фиксацией ширины элементов внутри дисплея div в виде таблицы, я понял, что подпись, вызывающая эту проблему, я попытался исправить ее без успеха, здесь является примером:Фиксация ширины элементов внутри дисплея div в виде таблицы

Вот код:

.row { 
 
    display:table; 
 
    border-spacing:10px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.row-element { 
 
    display: table-cell; 
 
} 
 
.row-element input{ 
 
    width:100%; 
 
    line-height:20px; 
 
} 
 
.row-element label{ 
 
font-family: Arial, Helvetica, sans-serif; 
 
font-size: 12px; 
 
font-weight: bold; 
 
color: #2E2F3F; 
 
display: table-caption; 
 
white-space: nowrap; 
 
    width:100%; 
 
    box-sizing:border-box; 
 
}

<div class="row"> 
 
    <div class="row-element"> 
 
    <label>Name#<span class="mandatory"> *</span></label> 
 
\t <input data="true" type="text" class="textfield error" title="Name" minlength="5" maxlength="15" message="Insert Your Name !" name="NAME_FIELD" mandatory=""> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row-element"><label>Outside Label &gt; <span class="mandatory"> *</span></label> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <input data="true" type="text" class="textfield error" minlength="5" maxlength="15" message="Insert Your Name !" name="NAME_FIELD" mandatory=""> 
 
\t \t \t \t \t </div> 
 
<div class="row-element"> 
 
    <label>custom_mandatory text#<span class="mandatory"> (Please Specify)</span></label> 
 
    <input data="true" type="text" class="textfield error" mandatory-text="(Please Specify)" title="custom mandatory text" message="Insert Your Name !" name="NAME_FIELD" mandatory=""> 
 
\t </div> \t \t \t \t \t 
 
</div>

источник

2016-03-31 arefedrees

вот мой пример: http://codepen.io/pen/vGeBKN – arefedrees

Пока не ясно, что желаемый результат – bumpy

если открыть ссылку, указанную в моем первом комментарии, вы увидит, что входные данные не одинаковы, каждый элемент mus имеет одинаковую ширину, вот в чем проблема bumpy – arefedrees

это то, что вы после этого? Я добавил в row и некоторую произвольную ширину до row-element.

.row { 
 
    display:table; 
 
    border-spacing:10px; 
 
    width: 100%; 
 
    height: 100%; 
 
    table-layout: fixed; 
 
} 
 

 
.row-element { 
 
    display: table-cell; 
 
    width: 100px; 
 
} 
 
.row-element input{ 
 
    width:100%; 
 
    line-height:20px; 
 
} 
 
.row-element label{ 
 
font-family: Arial, Helvetica, sans-serif; 
 
font-size: 12px; 
 
font-weight: bold; 
 
color: #2E2F3F; 
 
display: table-caption; 
 
white-space: nowrap; 
 
    width:100%; 
 
    box-sizing:border-box; 
 
}

<div class="row"> 
 
    <div class="row-element"> 
 
    <label>Name#<span class="mandatory"> *</span></label> 
 
\t <input data="true" type="text" class="textfield error" title="Name" minlength="5" maxlength="15" message="Insert Your Name !" name="NAME_FIELD" mandatory=""> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row-element"><label>Outside Label &gt; <span class="mandatory"> *</span></label> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <input data="true" type="text" class="textfield error" minlength="5" maxlength="15" message="Insert Your Name !" name="NAME_FIELD" mandatory=""> 
 
\t \t \t \t \t </div> 
 
<div class="row-element"> 
 
    <label>custom_mandatory text#<span class="mandatory"> (Please Specify)</span></label> 
 
    <input data="true" type="text" class="textfield error" mandatory-text="(Please Specify)" title="custom mandatory text" message="Insert Your Name !" name="NAME_FIELD" mandatory=""> 
 
\t </div> \t \t \t \t \t 
 
</div>

источник

2016-04-04 16:32:15 bumpy

Wow, его отлично работает: D, Большое спасибо bumby, оцененный – arefedrees

Фиксация ширины элементов внутри дисплея div в виде таблицы

ответ

Смежные вопросы