> 웹 프론트엔드 > HTML 튜토리얼 > HTML 左边的左对齐 右边的右对齐_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:40:10
원래의
3555명이 탐색했습니다.

    各位大神请教个问题,小弟做了个手机网页 ,想实现左右对齐的布局,自己怎么也实现不了,在此求教。
左边是一个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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿