为什么我不能得到两个 <p> 元素可以并排并按中心对齐？
[英]Why can't I get two <p> elements to be side-by-side and aligned by center?
问题描述
Here is a blue print of what I am trying to do: 
这里是什么，我试图做一个蓝图：
As you can see, I want to move the two texts to the center of there input box. 如您所见，我想将两个文本移到输入框的中央。
HTML: HTML：
<p id="win">On win:</p>
<p id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>
I tried to do this with no luck: 我试图做到这一点没有运气：
<p style="text-align: center;" id="win">On win:</p>
<p style="text-align: center;float: left;" id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>
CSS for input: 输入CSS：
input[class="default"] {
width: 30%;
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
border: 1px solid #555;
text-align: center;
background-color: white;
display: inline-block;
}
How can I do this properly? 如何正确执行此操作？
5 个解决方案
解决方案1
0 2017-08-08 08:23:32
Give both p elements the float: left; 给两个p元素都赋予float: left; style. 样式。
解决方案2
0 已采纳 2017-08-08 08:23:45
Using float s and text-align you can achieve it: 使用float和text-align可以实现：
body {text-align: center;} #win, #lose {width: 50%; float: left; text-align: center;} #lose {float: right;} .default {display: inline-block; width: 45%; padding: 3px;}
<p id="win">On win:</p> <p id="lose">On lose:</p> <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/> <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>
Preview 预习
解决方案3
0 2017-08-08 08:27:40
You have to set a block with the input and the title. 您必须使用输入和标题设置一个块。
body { text-align:center; } input[class="default"] { padding: 12px 20px; margin : 0 auto; box-sizing: border-box; border: 1px solid #555; text-align: center; background-color: white; display: inline-block; } #lose,#win { display:inline-block; text-align:center; width: 30%; }
<body> <div id="win"> <p>On win:</p> <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/> </div> <div id="lose"> <p>On lose:</p> <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/> </div> </body>
解决方案4
0 2017-08-08 08:27:57
I would use a flexbox for a div around the paragraphs and the inputs. 我会在段落和输入周围的div中使用flexbox。
.row { display: flex; justify-content: space-around; width: 50%; } input[class="default"] { width: 30%; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; border: 1px solid #555; text-align: center; background-color: white; display: inline-block; }
<div class="row"> <p id="win">On win:</p> <p id="lose">On lose:</p> </div> <div class="row"> <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off" /> <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off" /> </div>
解决方案5
0 2017-08-08 08:33:46
The best approach for me is to use flex along with containers : it will not mess with your DOM (like float does eg. child elements can get bigger than their parent). 对我而言，最好的方法是将flex与容器一起使用：它不会与您的DOM混淆（例如float确实如此，例如子元素可以变得比其父元素大）。 So i'll go with : 因此，我将继续：
#flexbox { display: flex; flex-direction: row; } .container { text-align: center; } input[class="default"] { width: 30%; padding: 12px 20px; margin : 0 auto; box-sizing: border-box; border: 1px solid #555; text-align: center; background-color: white; display: inline-block; }
<div id="flexbox"> <div class="container"> <p id="win">On win:</p> <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/> </div> <div class="container"> <p id="lose">On lose:</p> <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.