首頁 > web前端 > html教學 > HTML 左边的左对齐 右边的右对齐_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:40:10
原創
3556 人瀏覽過

    各位大神请教个问题,小弟做了个手机网页 ,想实现左右对齐的布局,自己怎么也实现不了,在此求教。
左边是一个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>
登入後複製

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



  


  


  


我都试一下。十分感谢

 写错了,label没有结束


  


  


  







    


    


    


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


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


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



刚写的每个P标签中就是一行,你的意思是每行有间距是吗?手机端的是很头痛的事,我都是先定义字体大小62.5%,这样定义文字大小时就可以脑子中想着PC,把手机端想成是PC端,手机中字体1.2rem相当中PC的12px,line-height:3rem=30px;
margin:1rem auto=margin:10px auto;
自己也是最近才开始学这个,写完一个在不同手机上测试过,好像就是这么个道理
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板