Блог

Главная - Вопросы по программированию - Как выровнять разделы, чтобы создать поле, похожее на поле поиска

Как выровнять разделы, чтобы создать поле, похожее на поле поиска

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать макет, который включает в себя внешний DIV элемент с двумя внутренними DIV элементами.

Оба из двух внутренних DIV s должны быть центрированы по вертикали.

Один из внутренних DIV s должен быть привязан к правому краю внешнего DIV (с отступом в несколько пикселей).

Другой внутренний DIV элемент должен быть горизонтально центрирован во всем внешнем DIV .

Что-то вроде этого.

 ___________________________
|                         |
|[     some text      ][S]|
|_________________________|

«Некоторый текст» DIV может находиться за буквой «S» DIV или рядом с ней, это не имеет большого значения.

Я не могу использовать ::after , поскольку к «S» DIV должно быть прикреплено onClick событие (на самом деле это кнопка поиска внутри DIV )

Я перепробовал множество различных способов добиться этого, но ничего не получается.

Прямо сейчас у меня есть следующее, которое использует display: flex , что близко, но не совсем правильно.

 #resultBox {
  border: 1px dotted black;
  border-radius: 5px;
  margin-top: 25px;
  margin-bottom: 15px;
  padding: 5px;
  padding-top: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

#resultText {
  font-family: myFont;
  font-size: 2.8vw;
  letter-spacing: 0.18em;
}

#searchButton {
  font-size: 1.5vw;
  cursor: pointer;
  padding: 20px;
}  
 <div id="resultBox">
  <div id="resultText">
    <span id="part1">Here's</span>
    <span id="part2">some</span>
    <span id="part3">text</span>
  </div>
  <div id="searchButton" onClick="search();">amp;#x1F50E</div>
</div>

Это приближает меня, но я хочу searchButton DIV , чтобы оно было справа, независимо от содержимого resultText DIV .
Я думаю, я мог бы использовать table , но это кажется немного старомодным.

Комментарии:

1. Вы ищете: contenteditable="true" ?

2. Нет, извините. Вопрос не имеет ничего общего с возможностью редактирования содержимого… Речь идет о выравнивании DIV значка поиска. Я отредактирую вопрос, чтобы сделать его более понятным.

3. Хорошо, это было просто чудо, пожалуйста, посмотрите, чтобы ответить

Ответ №1:

Чтобы сохранить текст в центре и установить значок поиска справа, вы можете просто установить margin: auto для вашего текста:

 #resultText {
  font-family: myFont;
  font-size: 2.8vw;
  letter-spacing: 0.18em;
  padding-left: calc(1.5vw   40px); /** To compensate icon size on the right we add padding-left similar width **/
  margin: auto;
}

ДЕМОНСТРАЦИЯ

 #resultBox {
  border: 1px dotted black;
  border-radius: 5px;
  margin-top: 25px;
  margin-bottom: 15px;
  padding: 5px;
  padding-top: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

#resultText {
  font-family: myFont;
  font-size: 2.8vw;
  letter-spacing: 0.18em;
  padding-left: calc(1.5vw   40px); /** To compensate icon size on the right we add padding-left similar width **/
  margin: auto;
}

#searchButton {
  font-size: 1.5vw;
  cursor: pointer;
  padding: 20px;
}  
 <div id="resultBox">
  <div id="resultText">
    <span id="part1">Here's</span>
    <span id="part2">some</span>
    <span id="part3">text</span>
  </div>
  <div id="searchButton" onClick="search();">amp;#x1F50E</div>
</div>