recherche

Maison >interface Web >tutoriel HTML >HTML 左边的左对齐 右边的右对齐_html/css_WEB-ITnose

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

WBOY
WBOYoriginal
2016-06-24 11:40:103535parcourir

    各位大神请教个问题，小弟做了个手机网页 ，想实现左右对齐的布局，自己怎么也实现不了，在此求教。
左边是一个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;
自己也是最近才开始学这个，写完一个在不同手机上测试过，好像就是这么个道理
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：常用的CSS命名规则_html/css_WEB-ITnoseArticle suivant：CSS3 timing-function: steps()_html/css_WEB-ITnose

Articles Liés

Voir plus