HTML Left alignment on the left Right alignment on the right_html/css

HTML Left alignment on the left Right alignment on the right_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:10

Original

3528 people have browsed it

Dear masters, I have a question. I made a mobile web page and want to achieve a left-right alignment layout. I can't achieve it myself. I'm here to ask for advice.
On the left is a label, left aligned, and on the right are 2 buttons and a text box, right aligned.

Reply to discussion (solution)

<!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>

Copy after login

Oh, it was written wrong, the width is not Half and half, you can set it according to the situation

Peach

Yali

Apple< label>< ;/p>

I’ll give it a try. Thank you very much

Wrong writing, the label does not end

Taozi

Yali

< ;label>Apple

< ;label>Taozi

Yali

Apple< input type="button" value="-"/>

The mobile terminal has to adapt to multiple resolutions, try to convert, don’t use absolute font size

I want to manage it line by line. Is there any complete code? I wrote and changed it but still can't achieve it

I want to manage it line by line. Is there any complete code? I've written and changed it but it still doesn't work.

Each P tag I just wrote is one line. Do you mean there is a spacing between each line? The mobile version is a headache. I always define the font size at 62.5% first. In this way, when defining the text size, I can think of the PC and the mobile version as the PC. The font size of 1.2rem on the mobile phone is equivalent to 12px on the PC. , line-height:3rem=30px;
margin:1rem auto=margin:10px auto;
I only started to learn this recently. After writing one, I tested it on different mobile phones. It seems to be the truth