求CSS高手指教网页布局
如图，我想实现上图所示的一种N行两列的布局，求一种优雅的CSS写法，目前每行我都是放在ul的li里。本人新手，不胜感激。能实现左侧列内的内容右侧对齐，右侧列的内容左侧对齐...
如图，我想实现上图所示的一种N行两列的布局，求一种优雅的CSS写法，目前每行我都是放在ul的li里。本人新手，不胜感激。
能实现左侧列内的内容右侧对齐，右侧列的内容左侧对齐 展开
能实现左侧列内的内容右侧对齐，右侧列的内容左侧对齐 展开
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body {margin:30px auto; width:600px; }
敬弯 #left {float:left; text-align:right; width:150px;}
#right {float:left; padding-left:20px;}
ul {padding:0;}
li {list-style:none; padding:0 0 10px 0;}
</style>
</head>
<body>
<div id="left">
<ul>
型稿答 <li>姓名 </li>
<li>性别 </li>
<li>出生日期 </li>
</ul>
</div>
<div id="right">
<ul>
<li><input type="text" name="name" /> </li>
<li><input type="text" name="gender" /> </li>
<li><input type="text" name="date_of_birth" /> </li>
</ul>
</div>
卜慧
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在姓名与性别前加上nbsp;(在nbsp;前加上&，ie总是自动把那个字符转化为空格)（表示空格），使其与出生日期右边对其
你把下面这段代码粘到一个新的html中看看是这个效果么
<ul style="list-style:none; line-height:30px;">
<li>用户<input type="text" name="yonghu" value="" />差销</li>
<li>密吵扰码<input type="password" name="mima" value="" /></li>
<li>验证码<input type="text" name="" value="" ; /></li>
</ul>（在nbsp;前加升庆旦上&，表示空格，在用户和密码前分别加两个）
你把下面这段代码粘到一个新的html中看看是这个效果么
<ul style="list-style:none; line-height:30px;">
<li>用户<input type="text" name="yonghu" value="" />差销</li>
<li>密吵扰码<input type="password" name="mima" value="" /></li>
<li>验证码<input type="text" name="" value="" ; /></li>
</ul>（在nbsp;前加升庆旦上&，表示空格，在用户和密码前分别加两个）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不要用ul li进行布局
可以用div+css进行布局，更加方便，而且对搜索引擎也咐巧没更优化
<衡纳div id="content">
姓名宽搜：<input type="text name="name"/>
性别:<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
<br/>
出生日期：<input type="text name="birthday"/>
</div>
可以用div+css进行布局，更加方便，而且对搜索引擎也咐巧没更优化
<衡纳div id="content">
姓名宽搜：<input type="text name="name"/>
性别:<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
<br/>
出生日期：<input type="text name="birthday"/>
</div>
更多追问追答
追问
您确定能实现左侧的列内的内容右侧对齐，右侧列的内容左侧对齐？
追答
可以实现，不过要对齐的话在姓名，性别的中间还得加几个空格 ，比如姓 名,具体你可以调一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
整个框架来布局吧，像渴切-开源中文css框架，bootstrap 都能快速搞掂
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
label+input
可以用li或者P都可以
可以用li或者P都可以
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
