用于对齐文本框和标签的CSS [英] CSS for Aligning TextBox and Label

问题描述

我正在尝试将表格布局从表格中移开，并进入div和CSS的世界.

我在布局上遇到了困难.我想对标签直接位于输入上方的元素进行排序.这是当前的样子:

我希望区标签和文本框垂直对齐，但它们似乎正在形成阶梯状.

这是CSS:

  #content{位置:绝对；顶部:110px；左:350px；宽度:775px；高度:605像素；}#内容标签{显示:内联;margin-right:4px;垂直对齐:顶部;}#内容输入{向左飘浮;边距:1px 20px 1px 1px;} 

和HTML:

 < div id ="content">< label for ="txt_RequestId">请求ID</label>< input id ="txt_RequestId" type ="text"/>< label for ="txt_District"> District</label>< input id ="txt_District" type ="text"/></div> 

解决方案

将 input 元素嵌套在 label s中，以便对文本标签和字段进行分组.

此用法在 HTML4规范中指定:

要将标签与另一个控件隐式关联，该控件元素必须在LABEL元素的内容之内.在这种情况下，LABEL只能包含一个控制元素.标签本身可以位于相关控件的前面或后面.

 < div id ="content"><标签>请求ID< br/>< input id ="txt_RequestId" type ="text"/></label><标签>地区< br/>< input id ="txt_District" type ="text"/></label></div> 

CSS:

  #content{位置:绝对；顶部:110px；左:350px；宽度:775px；高度:605像素；}#内容标签{显示:内联;向左飘浮;margin-right:4px;垂直对齐:顶部;} 

示例

然后将 display:inline 和 float:left 应用于< label> s(或使用 display:inline-如果您不必担心使用较旧的浏览器，请使用 代替.示例))

I'm trying to take my Form layout away from tables and entering the world of div's and css.

I'm having difficulty though in my layout. I'd like to order the elements where a label is positioned directly above an input. Here's what it currently looks like:

I'd like the District Label and Textbox to be vertically aligned, but they seem to be forming a stair pattern.

Here's the css:

#content
{
    position: absolute;
    top: 110px;
    left: 350px;
    width: 775px;
    height: 605px;

}

#content label
{
    display:inline;
    margin-right:4px;
    vertical-align:top;
}

#content input
{
    float:left;
    margin:1px 20px 1px 1px;
}

and the HTML:

<div id="content">
        <label for="txt_RequestId">Request Id</label>
        <input id="txt_RequestId" type="text" />

        <label for="txt_District">District</label>
        <input id="txt_District" type="text" />
</div>

解决方案

nest the input elements in the labels so the text label and field are grouped.

this usage is specified in the HTML4 spec:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

<div id="content">
    <label>
        Request Id<br />
        <input id="txt_RequestId" type="text" />
    </label>

    <label>
        District<br />
        <input id="txt_District" type="text" />
    </label>
</div>

CSS:

#content
{
    position: absolute;
    top: 110px;
    left: 350px;
    width: 775px;
    height: 605px;
}

#content label
{
    display:inline;
    float:left;
    margin-right:4px;
    vertical-align:top;
}

example

Then apply display:inline and float:left to the <label>s (or use display:inline-block instead if you don't have to worry about older browsers example)

这篇关于用于对齐文本框和标签的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！