как выровнять вводимый текст по правому краю

#html #css

#HTML #css

Вопрос:

Я пытаюсь выполнить расширенный поиск в Google. У меня возникли проблемы с вводимым текстом, я хочу выровнять их правильно, как Google, на близком расстоянии и все соответственно. Это мой html:

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

Это мой css:

 #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;
    float: right;
}

Но это заставляет их двигаться вправо… Слишком много. Хотел бы я это настроить. Вот как это выглядит.
[1]: https://i.stack.imgur.com/zX83k.png

Любая помощь приветствуется, спасибо.

1. Вы можете добавить margin-right, то есть margin-right: 40%, чтобы сдвинуть поля ввода влево на некоторую величину.

2. Вау, большое вам спасибо, это сработало

3. Ладно, мне очень жаль, ха-ха… Но на первый взгляд кажется, что это сработало, но на самом деле это не соответствует тексту, это выглядит так: i.stack.imgur.com/aQ1JH.png

Ответ №1:

Вы можете просто применить width или max-width к контейнеру ( #advanced ) в вашем текущем коде:

 #advanced {
  width: 100%;
  max-width: 520px;
}

#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;
  float: right;
}

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

Развернуть фрагмент кода

Ответ №2:

используйте flexbox

 #advanced {
  flex: 1;
  flex-direction: column;
}

и удалить

дисплей: блок; поплавок: справа;

и удалите БР

1. Вот как это выглядит, если я это сделаю

2. Если вы видите это снова, теперь все в порядке, я это исправил 🙂

3. Извините, я думаю, что это flex-direction: column; и попробуйте удалить ширину

4. Нет, это не сработало, и я был неправ… Прошлая вещь тоже не сработала