CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 13626

How to display textboxes one under another without shifting?

I have the following HTML code:

<div>
    <p><label>Faculty <input type="text" class = "f"></label></p>
    <p><label >Department<input type="text" class = "f"></label></p>
</div>

How can I make textboxes appear one under another without shifting?

Upvotes: 5

Views: 1032

Answers (2)

Stickers
Stickers

Reputation: 78706

You could do it with inline-block, additional <span> tags added.

div > p > label > span {
    display: inline-block;
    width: 90px;
}
<div>
    <p>
        <label>
            <span>Faculty</span>
            <input type="text" class="f" />
        </label>
    </p>
    <p>
        <label>
            <span>Department</span>
            <input type="text" class="f" />
        </label>
    </p>
</div>

Or, the css table way.

div > p > label {
    display: table;
    table-layout: fixed;
}
div > p > label > span {
    display: table-cell;
}
div > p > label > span:first-child {
    width: 90px;
}
<div>
    <p>
        <label>
            <span>Faculty</span>
            <span><input type="text" class="f" /></span>
        </label>
    </p>
    <p>
        <label>
            <span>Department</span>
            <span><input type="text" class="f" /></span>
        </label>
    </p>
</div>

Upvotes: 1

Himanshu Tanwar
Himanshu Tanwar

Reputation: 906

give a left margin to your input field for faculty

Upvotes: 1

Related Questions