Home > Article > Web Front-end > HTML Left alignment on the left Right alignment on the right_html/css_WEB-ITnose
HTML Left alignment on the left Right alignment on the right_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:103526browse
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> Oh, it was written wrong, the width is not Half and half, you can set it according to the situation
c9ccee2e6ea535a969eb3f532ad9fe89
html{font-size:62.5%}/*Initialize the font size and change the default font to 10px*/
body{ width:100%;}
section p{width:95%; margin:0 auto;overfolw:hidden;}
label{width:20%; float:left; font-size:1.4rem; line- height:3rem;}
input[type="button"]{width:3rem; float:right;font-size:1.4rem; line-height:3rem;}
input[type="text"] {width:50%; float:right;font-size:1.4rem; line-height:3rem;}/*You have to adjust these to beautify yourself*/
531ac245ce3e4fe3d50054a55f265927
2f8332c8dcfd5c7dec030a070bf652c3
e388a4556c0f65e1904146cc1a846bee2e1cf0710519d5598b1f0f14c36ba674Peach2e1cf0710519d5598b1f0f14c36ba674b6f9724a2ea1ee41c50d6d046fbcebe29551d7cb8e8a0ef40b7240ac4a7200a0051ae147966f559380e16339d85b675b94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee2e1cf0710519d5598b1f0f14c36ba674Yali2e1cf0710519d5598b1f0f14c36ba674b6f9724a2ea1ee41c50d6d046fbcebe2 9551d7cb8e8a0ef40b7240ac4a7200a0051ae147966f559380e16339d85b675b94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee2e1cf0710519d5598b1f0f14c36ba674Appledb34b640d334208092045f3dbf714fc8b6f9724a2ea1ee41c50d6d046fbcebe29551d7cb8e8a0ef40b7240ac4a7200a0051ae147966f559380e16339d85b675b< ;/p>
4d7ab0de9a42de71c682b0860bad1410
I’ll give it a try. Thank you very much
Wrong writing, the label does not end
c9ccee2e6ea535a969eb3f532ad9fe89
html{font-size:62.5%}/*Initialize the font size and change the default font to 10px* /
body{width:100%;}
section p{width:95%; margin:0 auto;overfolw:hidden;}
label{width:20%; float:left; font-size :1.4rem; line-height:3rem;}
input[type="button"]{width:3rem; float:right;font-size:1.4rem; line-height:3rem;}
input[ type="text"]{width:50%; float:right;font-size:1.4rem; line-height:3rem;}/*You have to adjust these to beautify yourself*/
531ac245ce3e4fe3d50054a55f265927
2f8332c8dcfd5c7dec030a070bf652c3
e388a4556c0f65e1904146cc1a846bee2e1cf0710519d5598b1f0f14c36ba674Taozi2e1cf0710519d5598b1f0f14c36ba674b6f9724a2ea1ee41c50d6d046fbcebe230385393ca1eb94aacbd360c6952ebe1051ae147966f559380e16339d85b675b94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee2e1cf0710519d5598b1f0f14c36ba674Yali2e1cf0710519d5598b1f0f14c36ba674b1a1ee8bdfdde463769567a09cd8bd0c9551d7cb8e8a0ef40b7240ac4a7200a0051ae147966f559380e16339d85b675b94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee< ;label>Apple2e1cf0710519d5598b1f0f14c36ba674b6f9724a2ea1ee41c50d6d046fbcebe29551d7cb8e8a0ef40b7240ac4a7200a08ecfa495b7d83f4d8530356d77df7a7d94b3e26ee717c64999d7867364b1b4a3
4d7ab0de9a42de71c682b0860bad1410
c9ccee2e6ea535a969eb3f532ad9fe89
html{font-size:62.5%}/*Initialize the font size, change the default font to 10px*/
*{marign:0; padding: 0;}
body{width:100%;}
p{width:100%; margin:1rem auto; display:block;overfolw:hidden;}
label{width:20%; float: left;display:block; font-size:1.4rem; line-height:3rem; text-align: right;}
input[type=button]{width:3rem;border:none; background: #00b168; float :left;font-size:1.4rem; line-height:3rem;display:block;}
input[type=text]{width:60%; float:left;border:none; background: #ffcc00;font -size:1.4rem; line-height:3rem;display:block;}/*You have to adjust these to beautify yourself*/
531ac245ce3e4fe3d50054a55f265927
2f8332c8dcfd5c7dec030a070bf652c3
e388a4556c0f65e1904146cc1a846bee< ;label>Taozi8c1ecd4bb896b2264e0711597d40766cb6f9724a2ea1ee41c50d6d046fbcebe29551d7cb8e8a0ef40b7240ac4a7200a0bd2a86a8578fb7d6356cf0180eb8045e94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee2e1cf0710519d5598b1f0f14c36ba674Yali8c1ecd4bb896b2264e0711597d40766cb6f9724a2ea1ee41c50d6d046fbcebe261f4bccb173524e79cce2b1a6e3a0291051ae147966f559380e16339d85b675b94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee2e1cf0710519d5598b1f0f14c36ba674Apple8c1ecd4bb896b2264e0711597d40766c64c8a118aeb806ad465d4964967fd2309551d7cb8e8a0ef40b7240ac4a7200a0051ae147966f559380e16339d85b675b94b3e26ee717c64999d7867364b1b4a3
4d7ab0de9a42de71c682b0860bad1410
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