CSS对齐问题答案

【问题标题】：CSS alignment problemCSS对齐问题
【发布时间】：2011-11-12 18:43:59
【问题描述】：

我怎样才能使我的注册字段像这样

如何通过 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 没有帮助，我没有找到解决方案。感谢您的帮助。

【问题讨论】：

给<h5>s 一个固定的宽度，或者把整个东西放在一个桌子上。我不知道 1) 具有相等的宽度，2) 让宽度流动，3) 不要同时使用一张桌子。
@Jon 我不想要固定宽度...我想要相反的。
这不是正确的代码，如果您需要有关输入的帮助，请向我们展示渲染输入的代码。
这里有什么问题？我使用 Razor，它将 Html.Textbox 转换为 ... 那么，我应该为该输入提供哪个 CSS？
只用jQuery动态处理宽度，你已经把jQuery列为标签了！

标签： jquery html css asp.net-mvc asp.net-mvc-3

【解决方案1】：

给你

http://jsfiddle.net/8YAhW/

注意标签标签和“for”属性。这有助于在制作表单时在常用项目之间切换。

希望对你有所帮助

【讨论】：

在此示例中，输入字段不会跨越到页面的末尾。
我的问题不在于它...再次观看我的屏幕截图...我的两个文本框在同一点结束（div 的结尾）...

【解决方案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;
}

Check here for an example.

【讨论】：

嗯，又是固定宽度……
什么？ 88%？我的文本框开始点必须是跨度的结束点...在您的示例中，所有 textbxoes 从同一点开始。再次查看我的屏幕截图...
我了解您的需求，但要做到这一点非常困难。如果将宽度设置为 100%；输入将浮动到新行。这是我能想到的唯一可行的方式来密切再现你此刻的欲望。

【解决方案3】：

通过更改您的视图，您可以实现这一点。我的答案基于以下答案：How to make text input box to occupy all the remaining width within parent block?

您可以在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%;
}

【讨论】：

感谢您的回答.. 我怎样才能使该标签的文本保持内联？如果写“用户名”而不是“用户名”第二部分将转到下一行））））
whitespace:nowrap 也解决了这个问题...感谢人的回答）））
@mesiesta：请注意这个答案won't work in IE7，如果这很重要的话。
我知道，我正在使用 html 5 编写网站，所以支持 IE 9+ 就足够了...但是你的回答也很好，我投赞成票）））
不错！但是那些id="inner"和id="text"真的应该是class="inner"和class="text"，并且对应的CSS应该使用.inner和.text而不是#inner和#text。

【解决方案4】：

见：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>

【讨论】：