首页 新闻 搜索 专区 学院

关于html的问题

1
[已解决问题] 解决于 2016-05-18 09:40
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4 <style type="text/css">
 5     .tb{
 6         width:285px;
 7         border:1px solid #CCC;
 8         border-width:3px;
 9         border-color:#CCC;
10         text-align:center;
11     }
12     ul li{
13         list-style-type:none;
14         padding:5px;
15         margin:5px;
16         text-align:left;
17         }
18     #love1{
19         
20     }
21 </style>
22   <title> new document </title>
23   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
24  </head>
25  <body>
26     <form action="" method="post">
27         <div class="tb">
28             <ul>
29                 <li>账号:
30                     <input type="text"></li>
31                 <li>密码:
32                     <input type="passowrd"></li>
33                 <li>性别:
34                     <input type="radio" name="sex1" />35                     <input type="radio" name="sex1" />36                 </li>
37                 <li>爱好:
38                     <input type="checkbox" id="love1" />唱歌
39                     <input type="checkbox" id="love1" />跳舞
40                     <input type="checkbox" id="love1" />爬山
41                     <input type="checkbox" id="love1" />游戏
42                     <input type="checkbox" id="love1" />美食
43                     <input type="checkbox" id="love1" />电影
44                 </li>
45                 <li >描述:
46                     <textarea id="" rows="5" cols="21"></textarea>
47                 </li>
48                 <li align="right">
49                     <button type="submit">提交</button>
50                 </li>
51             </ul>
52             
53         </div>
54     </form>
55  </body>
56 </html>

现在打开浏览器后会发现,爱好那里,它的复选框没有跟那个上下的文本框对其,怎么解决

cocoyoona的主页 cocoyoona | 初学一级 | 园豆:20
提问于:2016-05-18 09:18
< >
分享
最佳答案
0

很正常,你是指和上面的单选? 这和浏览器本身默认的表单控件有关,若想对其,只能用个label包起来,设置长度···

奖励园豆:5
酸番茄 | 初学一级 |园豆:87 | 2016-05-18 09:23

???

cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:24

@眉间剪水泛千愁: 左对齐?这是因为radio和checkbox的默认样式造成的。不要纠结这种细节

酸番茄 | 园豆:87 (初学一级) | 2016-05-18 09:25

@眉间剪水泛千愁: 

酸番茄 | 园豆:87 (初学一级) | 2016-05-18 09:27

@hasbug: 笨蛋..复选框木有换行..

cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:30

@眉间剪水泛千愁: 逗···你宽度足够,它换行干什么···行内元素

酸番茄 | 园豆:87 (初学一级) | 2016-05-18 09:31

@hasbug: 不换行不行..规定让我换

cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:35

@眉间剪水泛千愁: 统一长度每项表单项长度···需求有点尴尬

酸番茄 | 园豆:87 (初学一级) | 2016-05-18 09:37

@hasbug: 没看懂

cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:37

@眉间剪水泛千愁: 简单来说就是对form设置一个宽度,然后其他那些输入框啊  文本框啊的列  都想办法让其铺满100%···

酸番茄 | 园豆:87 (初学一级) | 2016-05-18 09:41
其他回答(4)
0

简单,交给楼下说~

小光 | 园豆:1830 (小虾三级) | 2016-05-18 09:24

你走...不回答还来捣蛋

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:24

WTF..成你樓下了

支持(0) 反对(0) RosonJ | 园豆:4284 (老鸟四级) | 2016-05-18 09:25

@RosonJ: 真听话~

支持(0) 反对(0) 小光 | 园豆:1830 (小虾三级) | 2016-05-18 09:25

@眉间剪水泛千愁: 。。。把6个爱好分开成两个li试试

支持(0) 反对(0) 小光 | 园豆:1830 (小虾三级) | 2016-05-18 09:26

@小光: 怎么分?

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:30

@眉间剪水泛千愁: qq

支持(0) 反对(0) 小光 | 园豆:1830 (小虾三级) | 2016-05-18 09:32
0

没有园豆,还是交给楼下吧

laugher_ccc | 园豆:593 (小虾三级) | 2016-05-18 09:33
0

 

这样算是问题么?

LazyCat90 | 园豆:70 (初学一级) | 2016-05-18 09:34

复选框要换行的

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:35

@眉间剪水泛千愁: 为什么要换行,这样不听好嘛!(。•ˇ‸ˇ•。)

支持(0) 反对(0) LazyCat90 | 园豆:70 (初学一级) | 2016-05-18 09:37

@花落无声1991: 我也不想麻烦..让我换的,我都想删掉3个

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:38

@眉间剪水泛千愁: 嗖嗒!看见了, 是需求问题。

支持(0) 反对(0) LazyCat90 | 园豆:70 (初学一级) | 2016-05-18 09:38

@花落无声1991: 嗯..

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:38
0

第三个checkbox后面加<br>。简单快捷、方便明了

Ctrl` | 园豆:2602 (老鸟四级) | 2016-05-18 09:41

不行..笨蛋O(∩_∩)O

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 09:44

@眉间剪水泛千愁: 怎么可能??

http://www.5axxw.com/tools/web/web_run.html

链接点进去、把body替换成:

<body>

这里填写HTML代码<br>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><br><input type="checkbox"><input type="checkbox">
</body>

 

点击运行、效果自己看

支持(0) 反对(0) Ctrl` | 园豆:2602 (老鸟四级) | 2016-05-18 10:00

@g皓皓: 我把我的代码copy到上面,按你说的加了<br>,你试试就知道了..没有排

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 10:03

@眉间剪水泛千愁: 有个爬山俩字、后面加上<br>。换不过来?这边都行的、你那里就不行了?

支持(0) 反对(0) Ctrl` | 园豆:2602 (老鸟四级) | 2016-05-18 10:07

@g皓皓: 等下给你截图

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 10:08

@g皓皓: 

算了、代码拷给你吧还是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <style type="text/css">
5 .tb{
6 width:285px;
7 border:1px solid #CCC;
8 border-width:3px;
9 border-color:#CCC;
10 text-align:center;
11 }
12 ul li{
13 list-style-type:none;
14 padding:5px;
15 margin:5px;
16 text-align:left;
17 }
18 #love1{
19
20 }
21 </style>
22 <title> new document </title>
23 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
24 </head>
25 <body>
26 <form action="" method="post">
27 <div class="tb">
28 <ul>
29 <li>账号:
30 <input type="text"></li>
31 <li>密码:
32 <input type="passowrd"></li>
33 <li>性别:
34 <input type="radio" name="sex1" />男
35 <input type="radio" name="sex1" />女
36 </li>
37 <li>爱好:
38 <input type="checkbox" id="love1" />唱歌
39 <input type="checkbox" id="love1" />跳舞
40 <input type="checkbox" id="love1" />爬山<br>
41 <input type="checkbox" id="love1" />游戏
42 <input type="checkbox" id="love1" />美食
43 <input type="checkbox" id="love1" />电影
44 </li>
45 <li >描述:
46 <textarea id="" rows="5" cols="21"></textarea>
47 </li>
48 <li align="right">
49 <button type="submit">提交</button>
50 </li>
51 </ul>
52
53 </div>
54 </form>
55 </body>
56 </html>

支持(0) 反对(0) Ctrl` | 园豆:2602 (老鸟四级) | 2016-05-18 10:08

@g皓皓: 

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 10:10

@眉间剪水泛千愁: 对呀、第一行框不是对其了么(ˇˍˇ) ~

难道还想第二行的?

支持(0) 反对(0) Ctrl` | 园豆:2602 (老鸟四级) | 2016-05-18 10:11

@g皓皓: 笨蛋笨蛋..不对齐第二行我还在这问呀

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 10:13

@眉间剪水泛千愁: 骚等

支持(0) 反对(0) Ctrl` | 园豆:2602 (老鸟四级) | 2016-05-18 10:15

@g皓皓: 这个问题小光帮我解决了

支持(0) 反对(0) cocoyoona | 园豆:20 (初学一级) | 2016-05-18 10:15

@眉间剪水泛千愁: 

这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.tb{
width:285px;
border:1px solid #CCC;
border-width:3px;
border-color:#CCC;
text-align:center;
}
ul li{
list-style-type:none;
padding:5px;
margin:5px;
text-align:left;
}
#love1{

}
</style>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="" method="post">
<div class="tb">
<ul>
<li>账号:
<input type="text"></li>
<li>密码:
<input type="passowrd"></li>
<li>性别:
<input type="radio" name="sex1" />男
<input type="radio" name="sex1" />女
</li>
<li>爱好:
<input type="checkbox" id="love1" />唱歌
<input type="checkbox" id="love1" />跳舞
<input type="checkbox" id="love1" />爬山<br>
<span style="padding-left:48px">
<input type="checkbox" id="love1" />游戏
<input type="checkbox" id="love1" />美食
<input type="checkbox" id="love1" />电影
</span>
</li>
<li >描述:
<textarea id="" rows="5" cols="21"></textarea>
</li>
<li align="right">
<button type="submit">提交</button>
</li>
</ul>

</div>
</form>
</body>
</html>

支持(0) 反对(0) Ctrl` | 园豆:2602 (老鸟四级) | 2016-05-18 10:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册