堆栈垂直内联输入文本html

Question

这些输入文本已经垂直堆叠，但它们没有与其他文本对齐。图片：[1]：https://i.stack.imgur.com/UicEL.png

#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px; 
padding: 5px 10px;   
background-image: none;
font-size: 20px;
display: block;
margin-left: 30%;
}

<form action="https://google.com/search">
<div id="advanced">
Find pages with...<br/><br/>
all these words:<input type="text" name="as_q">
this exact word or phrase:<input type="text" name="as_epq">
any of these words:<input type="text" name="as_oq">
none of these words:<input type="text" name="as_eq">
</div>
<input type="submit" value="Advanced Search">
</form>

使它垂直堆叠的正是代码：

display: block;
margin-left: 30%;

Answer 1

这看起来以前在HERE已经得到了回答——将display:grid添加到父元素中可能会对您有用。

#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px; 
padding: 5px 10px;   
background-image: none;
font-size: 20px;
margin-left: 30%;
vertical-align:top;
}
#advanced {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:10px;
}
#advanced.settings label       { text-align:left; }
#advanced.settings label:after { content: ":"; }

<form action="https://google.com/search">
Find pages with...<br/><br/>
<div id="advanced">

all these words:<input type="text" name="as_q">
this exact word or phrase:<input type="text" name="as_epq">
any of these words:<input type="text" name="as_oq">
none of these words:<input type="text" name="as_eq">
</div>
<input type="submit" value="Advanced Search">
</form>