HTML 左边的左对齐 右边的右对齐_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:40:103492검색
各位大神请教个问题，小弟做了个手机网页 ，想实现左右对齐的布局，自己怎么也实现不了，在此求教。
左边是一个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;
自己也是最近才开始学这个，写完一个在不同手机上测试过，好像就是这么个道理
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.