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中我嘗試了很多，但沒有成功。 寬度：自動沒有幫助，我找不到解決方案。 感謝幫助。

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

在我必須重新編寫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 3

請參閱： 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 4

干得好

http://jsfiddle.net/8YAhW/

注意標簽標簽和“for”屬性。 這有助於在制作表單時常用的項目之間進行選項卡。

希望這可以幫助你