stack vertically inline input text html

Question

These input text are already stacked vertically but they're not in-line along with the other text. Image:[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>

What made it stack vertically was exactly the code:

  display: block;
  margin-left: 30%;

score 0 · Answer 1 · answered Dec 08 '20 at 05:50

This looks to have been answered previously HERE - something like this might work for you, adding display:grid to the parent element.

#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>

stack vertically inline input text html

1 Answers1