enter image description here

У меня есть текстовые и текстовые поля. Мои текстовые поля выровнены по меткам, но в случае текстовых областей метки находятся в основании текстовых областей. Пожалуйста, смотрите фигуру в приложении. Метки, соответствующие текстовым зонам, выровнены по нижней строке с текстовыми зонами.

Как я могу выровнять свои метки так, чтобы они находились на одной линии с текстовыми областями или в средней линии текстовых областей?

CSS и HTML код

<style>
    b {
        display: inline-block;
        width: 15%;
    }

    .upper-case {
        text-transform: uppercase;
    }

    .txtbox {
        width: 300px;
    }

    .txtarea {
        width: 600px;
    }

    .div_labels {
        text-align: left;
        width: 100%;
        font-size: 13px;
        margin-bottom: 5px;
    }
</style>
<div class="div_labels">
<b>Medical History :</b>
<textarea rows="4" runat="server" id="textareaMedHistory" class="upper-case txtarea" placeholder="MEDICAL HISTORY" />
</div>
<div class="div_labels">
<b>Diagnosis :</b>
<textarea rows="4" runat="server" id="textareaDiagnosis" class="upper-case txtarea" placeholder="DIAGNOSIS" />
</div>
<div class="div_labels">
</div>
<div class="div_labels">
<b>ICD :</b>
<input type="text" id="inputTextICD" runat="server" class="upper-case txtbox" placeholder="ICD"/>
</div>
0
user4221591 19 Сен 2017 в 20:09

3 ответа

Лучший ответ

Добавление вертикального выравнивания: тег top to b должен это сделать.

И текстовые зоны не закрываются самостоятельно, добавил </textarea>

    b {
        display: inline-block;
        width: 15%;
        vertical-align: top;
    }

    .upper-case {
        text-transform: uppercase;
    }

    .txtbox {
        width: 300px;
    }

    .txtarea {
        width: 600px;
    }

    .div_labels {
        text-align: left;
        width: 100%;
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    b {
      
    }
<div class="div_labels">
<b>Medical History :</b>
<textarea rows="4" runat="server" id="textareaMedHistory" class="upper-case txtarea" placeholder="MEDICAL HISTORY"></textarea>
</div>
<div class="div_labels">
<b>Diagnosis :</b>
<textarea rows="4" runat="server" id="textareaDiagnosis" class="upper-case txtarea" placeholder="DIAGNOSIS" ></textarea>
</div>
<div class="div_labels">
</div>
<div class="div_labels">
<b>ICD :</b>
<input type="text" id="inputTextICD" runat="server" class="upper-case txtbox" placeholder="ICD"/>
</div>
1
dvr 19 Сен 2017 в 17:12

Добавьте display:flex; в div для создания flexbox и margin:auto 0; в b для выравнивания по центру по вертикали

b {
        display: inline-block;
        width: 15%;
        margin:auto 0;
    }

    .upper-case {
        text-transform: uppercase;
    }

    .txtbox {
        width: 300px;
    }

    .txtarea {
        width: 600px;
    }

    .div_labels {
        text-align: left;
        width: 100%;
        font-size: 13px;
        display:flex;
        margin-bottom: 5px;
    }
<div class="div_labels">
<b>Medical History :</b>
<textarea rows="4" runat="server" id="textareaMedHistory" class="upper-case txtarea" placeholder="MEDICAL HISTORY"></textarea>
</div>
<div class="div_labels">
<b>Diagnosis :</b>
<textarea rows="4" runat="server" id="textareaDiagnosis" class="upper-case txtarea" placeholder="DIAGNOSIS" ></textarea>
</div>
<div class="div_labels">
</div>
<div class="div_labels">
<b>ICD :</b>
<input type="text" id="inputTextICD" runat="server" class="upper-case txtbox" placeholder="ICD"/>
</div>
1
jafarbtech 19 Сен 2017 в 17:26

Просто добавьте float: left; в стиле тега b

0
Daniel Gomez 19 Сен 2017 в 17:12