垂直堆叠内联输入文本html答案

【问题标题】：stack vertically inline input text html垂直堆叠内联输入文本html
【发布时间】：2020-12-08 15:27:55
【问题描述】：

这些输入文本已经垂直堆叠，但它们没有与其他文本对齐。图片：[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%;

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：