Проблема выравнивания CSS

Question

Как я могу сделать так, чтобы мои поля регистрации были такими

Как мне добиться этого с помощью CSS?Я имею в виду, что мои текстовые поля должны быть выровнены от конца метки до конца страницы ...

РЕДАКТИРОВАТЬ

Вот моя часть просмотра

<div id="member-search">

<h5>Last Name:</h5>
@Html.TextBox("member-last-name")
</div>
<div>
<h5>Pass:</h5>
@Html.TextBox("member-pass")
</div>

<input type="submit" value="Search" class="button"/>
</div>

В CSS я пыталсямного, но безуспешноwidth: auto не помогает, и я не могу найти решение для этого.Спасибо за помощь.

Answer 1

С изменениями в вашем взгляде вы можете достичь этого. Мой ответ основан на следующем ответе: Как сделать так, чтобы текстовое поле ввода занимало всю оставшуюся ширину внутри родительского блока?

Вы можете посмотреть измененную версию ответа на http://jsfiddle.net/626B2/63/

HTML:

<div id="parent">
    <div id="inner">
        <label>UserName</label><span><input id="text" type="text" /></span>
    </div>
    <div id="inner">
        <label>pass</label><span><input id="text" type="text" /></span>
    </div>
    <input id="submit" type="button" value="Submit" />
</div>

CSS:

#inner {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
    white-space:nowrap;

}
span {
    display: table-cell;
    width: 100%;
    padding: 0px 10px;
}
#text {
    width: 100%;
}

Answer 2

См .: http://jsfiddle.net/thirtydot/edGAp/

Это работает в IE7 и более поздних версиях + во всех современных браузерах.

CSS:

#member-search label {
    float: left
}
#member-search span {
    display: block;
    overflow: hidden;
    padding: 0 4px
}
#member-search input[type="text"] {
    width: 100%
}

HTML:

<div id="member-search">
    <div>    
        <label for="member-last-name">Last Name:</label>
        <span><input type="text" name="member-last-name" /></span>
    </div>
    <div>
        <label for="member-pass">Pass:</label>
        <span><input type="text" name="member-pass" /></span>
    </div>

    <input type="submit" value="Search" class="button" />
</div>

Answer 3

После того, как мне пришлось перекомпилировать ваш HTML, чтобы правильно отразить фактический отрендеренный код, это лучшее, что я могу придумать.

HTML:

<div id="member-search">

<label for="member-last-name">Last Name:</label>
<input type="text" name="member-last-name" class="myInput">
</div>
<div class="clear">
<label for="member-pass">Pass:</label>
<input type="text" name="member-pass" class="myInput">
</div>

<div class="clear">
<input type="submit" value="Search" class="button"/>
</div>

CSS:

#member-search
{
    width: 100%;
}

label
{
    float: left;
}

.myInput
{
    float: right;
    width: 88%;/*MILES AN HOUR, MARTY!*/
}

.clear
{
    clear: both;
}

Проверьте здесь пример .

Answer 4

здесь вы идете

http://jsfiddle.net/8YAhW/

Обратите внимание на метку метки и атрибут «для».Это помогает при переходе между элементами, обычно используемыми при создании форм.

Надеюсь, это поможет вам