【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-11-29
      • 1970-01-01
      • 2011-07-08
      • 1970-01-01
      • 1970-01-01
      • 2014-03-23
      • 2015-10-03
      • 1970-01-01
      相关资源
      最近更新 更多