Question

css如何让lable和textbox在一行显示啊

不想使用table





Answer 1

css代码

1
2
3
4
5
6
7

.reg{text-align: center;}
.reg dl{width:300px;text-align:left;}
.reg dl dt{margin:10px 0;}
.reg dl dt.user_img{text-align:center;margin:20px 0;}
.reg span{width:70px;display: block;float:left;}
.reg input.text{width:220px;height:19px;}
.reg input.button{margin:20px 35px;}

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form action="post.php" method="post">
<dl>
<dt><span>用户名：</span><input type="text" name="username" class="text"></dt>
<dt><span>密码：</span><input type="password" name="password" class="text"></dt>
<dt><span>密码确认：</span><input type="password" name="re_password" class="text"></dt>
<dt><span>密码提示：</span><input type="text" name="username" class="text"></dt>
<dt><span>密码回答：</span><input type="text" name="username" class="text"></dt>
<dt><span>性别：</span><input type="radio" name="man">男<input type="radio" name="women">女</dt>
<dt class="user_img"><img src="css/face/m01.gif" alt="m01" id="user_img"><input type="text" value="m01.gif" id="user_img_value"></dt>
<dt><span>电子邮件：</span><input type="text" name="mail" class="text"></dt>
<dt><span>QQ：</span><input type="text" name="qq" class="text"></dt>
<dt><span>主页地址：</span><input type="text" name="website" class="text"></dt>
<dt><span>验证码：</span><input type="text" name="yzm" class="text"></dt>
<dt><input type="submit" value="点击注册" class="button"><input type="reset" value="重置信息" class="button"></dt>
</dl>
</form>

Answer 2

css代码

.reg{text-align: center;}
.reg dl{width:300px;text-align:left;}
.reg dl dt{margin:10px 0;}
.reg dl dt.user_img{text-align:center;margin:20px 0;}
.reg span{width:70px;display: block;float:left;}
.reg input.text{width:220px;height:19px;}
.reg input.button{margin:20px 35px;}

html代码

            <form action="post.php" method="post">
            <dl>
                <dt><span>用户名：</span><input type="text" name="username" class="text"></dt>
                <dt><span>密码：</span><input type="password" name="password" class="text"></dt>
                <dt><span>密码确认：</span><input type="password" name="re_password" class="text"></dt>
                <dt><span>密码提示：</span><input type="text" name="username" class="text"></dt>
                <dt><span>密码回答：</span><input type="text" name="username" class="text"></dt>
                <dt><span>性别：</span><input type="radio" name="man">男<input type="radio" name="women">女</dt>
                <dt class="user_img"><img src="css/face/m01.gif" alt="m01" id="user_img"><br><input type="text" value="m01.gif" id="user_img_value"></dt>
                <dt><span>电子邮件：</span><input type="text" name="mail" class="text"></dt>
                <dt><span>QQ：</span><input type="text" name="qq" class="text"></dt>
                <dt><span>主页地址：</span><input type="text" name="website" class="text"></dt>
                <dt><span>验证码：</span><input type="text" name="yzm" class="text"></dt>
                <dt><input type="submit" value="点击注册" class="button"><input type="reset" value="重置信息" class="button"></dt>
            </dl>
            </form>

追问

运行结果是这样显示的，还是比较乱啊

Answer 3

哪有tablebox？如果是块级结构就用float:left;， 或者把块级变行级。display:inline；或者display:inline-block；

Answer 4

那个textbox？
一般可以设置display为inline-block 并设置width属性。或者将display设置为inline

Answer 5

用 float:left;