#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>
Комментарии:
1. @Angely вы можете проголосовать за него, если он был хорошим, и вы можете пометить его как решаемый, если он также решил вашу проблему.
Ответ №2:
используйте flexbox
#advanced {
flex: 1;
flex-direction: column;
}
и удалить
дисплей: блок; поплавок: справа;
и удалите БР
Комментарии:
1. Вот как это выглядит, если я это сделаю
2. Если вы видите это снова, теперь все в порядке, я это исправил 🙂
3. Извините, я думаю, что это flex-direction: column; и попробуйте удалить ширину
4. Нет, это не сработало, и я был неправ… Прошлая вещь тоже не сработала