HTML 左边的左对齐右边的右对齐_html/css

HTML 左边的左对齐右边的右对齐_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:40:10

original

3487 Les gens l'ont consulté

各位大神请教个问题，小弟做了个手机网页，想实现左右对齐的布局，自己怎么也实现不了，在此求教。
左边是一个label 左对齐右边是2个按钮一个文本框右对齐。

回复讨论(解决方案)

<!doctype html><html><head>  <title>DOM</title>	<style>		.main{width:500px;height:100px}		.leftDiv{float:left;background-color:red;width:100px;height:100%}		.rightDiv{float:right;background-color:yellow;width:400px;height:100%}		.content{line-height:30px;text-align:center}	</style></head><body><!-- 外层一个div，设置高度与宽度，包裹两个小div --><div class="main">	<!-- 小div使用float分别占据左右两边，高度100%，宽度对半 -->	<div class="leftDiv">		<!-- 里面的元素我设置了一些行高，并且水平居中了 -->		<div class="content"><label>桃子<label></div>		<div class="content"><label>鸭梨<label></div>		<div class="content"><label>苹果<label></div>	</div>	<div class="rightDiv">		<div class="content"><input type="button" value="-"/><input type="text" value="0"/><input type="button" value="+"/></div>		<div class="content"><input type="button" value="-"/><input type="text" value="0"/><input type="button" value="+"/></div>		<div class="content"><input type="button" value="-"/><input type="text" value="0"/><input type="button" value="+"/></div>	</div><div></body></html>

Copier après la connexion

哦，写错了，宽度不是对半，你自己看情况设置吧

桃子

鸭梨

苹果

我都试一下。十分感谢

写错了，label没有结束

桃子

鸭梨

苹果

桃子

鸭梨

苹果

移动端得适应多种分辩率，尽量转换，别用绝对字体大小

我想一行一行的管理。有没有完整代码。我写了改总是实现不了

刚写的每个P标签中就是一行，你的意思是每行有间距是吗？手机端的是很头痛的事，我都是先定义字体大小62.5%，这样定义文字大小时就可以脑子中想着PC，把手机端想成是PC端，手机中字体1.2rem相当中PC的12px,line-height:3rem=30px;
margin:1rem auto=margin:10px auto;
自己也是最近才开始学这个，写完一个在不同手机上测试过，好像就是这么个道理