Блог

Главная - Вопросы по программированию - Поиск, ввод, поля кнопок и отступы

Поиск, ввод, поля кнопок и отступы

#html #css #forms #css-transitions #margin

#HTML #css #формы #css-переходы #поля

Вопрос:

Я хотел бы убрать пробел между <input> и <button> .

В CSS я пробовал использовать padding: input, button {padding : 0px} , но это не сработало.

 <form action="search">
  <div class="input-search">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" />
    <button type="submit">
      <strong>Search</strong>
    </button>
  </div>
</form>

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

1. Используете ли вы какие-либо фреймворки? Сброс CSS? и т.д.?

2. Возможно, удаление пробела в макапе? : ...Angeles" /><button...

3. ты имеешь в виду вот так? — ibb.co/s9QLFF6

4. Спасибо, да, я хочу так @sergeykuznetsov.

5. Спасибо @LouysPatriceBessette все в порядке, большое вам спасибо, это просто, но я младший, студент. Спасибо

Ответ №1:

margin-left: -1em; может быть?

Поле может иметь отрицательное значение…

 button{
  margin-left: -1em;
} 
 <form action="search">
  <div class="input-search">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
  </div>
</form>

Ответ №2:

Вы можете добавить input-search стиль div display:flex .

 <form action="search">
  <div class="input-search" style="display:flex;">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
  </div>
</form>

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

1. Я пытался, но пробел не уходит, я попытаюсь добавить второе значение flexbox

2. Все в порядке, мне помог участник, спасибо за вашу помощь и за то, что нашли время ответить.