Блог

Главная - Вопросы по программированию - Я хотел бы иметь небольшое пустое пространство между 3 кнопками

Я хотел бы иметь небольшое пустое пространство между 3 кнопками

#html #css

Вопрос:

здравствуйте, это мой код html и мой css

 background-color: #4CAF50; /* Green */  border: none;  color: black;  text-align: center;  text-decoration: none;    font-size: 14px;    float:left;    }   .button2 {  background-color: orange; /* Green */  border: none;  color:black;  text-align: center;  text-decoration: none;    font-size: 14px;    float:left;   }   .button3 {  background-color: orangered; /* Green */  border: none;  color: white;  text-align: center;  text-decoration: none;    font-size: 14px;  float:left; } 
 lt;div class="grid-container"gt;  lt;div class="grid-item"gt;  lt;h4gt;lt;stronggt;Wecandoolt;/stronggt;lt;/h4gt;  lt;p style="text-align: left;"gt;lt;a href="https://la-box-cadeau.com/wecandoo/"gt;lt;img   class="size-medium wp-image-28876 alignleft" src="https://la-box-cadeau.com/wp-   content/uploads/2021/10/wecandoo-03-130x130-1.jpg" alt="box cadeau wecandoo"   width="100" height="100" /gt;lt;/agt;Un site qui répertorie les meilleurs artisans qui   proposent des ateliers découverte autour de chez vouslt;/pgt;   lt;divgt;lt;a class="button" href="https://wecandoo.fr/#ae432"gt;Site de la box lt;/agt; lt;a   class="button2" href="https://www.w3docs.com/"gt;Box bièreslt;/agt;lt;a class="button3"   href="https://la-box-cadeau.com/wecandoo/"gt;En savoir plus lt;/agt;lt;/divgt;  lt;stronggt;Box a partir de : 19,99lt;/stronggt;  lt;/divgt;

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

Я присоединяюсь также к снимку экрана, как сейчас работает сайт, спасибо, что прочитали это, и я надеюсь, что кто-нибудь сможет мне помочь [введите описание изображения здесь][1]

 [1]: https://i.stack.imgur.com/EZZ2Z.png

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

1. В вашем HTML-коде я не вижу класса button1. В CSS вы использовали поплавки, которые оставляют нормальный поток страницы, поэтому поля не будут работать. Можем ли мы правильно отредактировать ваш HTML и CSS в вашем коде, добавив также класс button1. Одним из быстрых решений является то, что вы используете display:inline-block и удаляете поплавки слева. Затем дайте margin-right:15px каждой кнопке класс. Попробуйте это один раз 🙂

2. @ImranRafiqRather Я не знаю, почему вы говорите, что маржа не будет работать с плавающими элементами — это работает для меня (при условии, что у них, конечно, есть некоторые размеры).

3. У вас могут быть более конкретные правила css для полей для элемента lt;agt;. Это может быть причиной того, что в вашем случае маржа не работает. Вам нужно использовать «Инструменты разработчика», чтобы выяснить это.

Ответ №1:

Вы действительно хотите, чтобы весь элемент привязки имел поле, чтобы поля были разделены. Вы говорите, что пробовали это, и «это не сработало», я не могу сказать, почему, но этот фрагмент дает поле для каждого поля, и он нормально работает с плавающими элементами.

Поле было распределено между правым и левым, так что есть немного симметрии. Вы можете просто положить его справа и снять на последней коробке, если он там не нужен.

Обратите внимание, что float действительно используется для размещения элемента, вокруг которого вы хотите, например, обернуть другой текст, — часто используется для размещения изображения в тексте. Возможно, вам захочется изучить встроенный блок для размещения элементов рядом, где никогда не потребуется обертывание (если это так в вашей системе).

 .button {  /* added for demo so the boxes have some height and fixed dimmensions */  position: relative;  height: 100px;  width: 100px;  margin: 0 7.5px 0 7.5px;  border: none;  color: black;  text-align: center;  text-decoration: none;  font-size: 14px;  float: left; }  .button1 {  background-color: #4CAF50;  /* Green */ }  .button2 {  background-color: orange; }  .button3 {  background-color: orangered; } 
 lt;div class="grid-container"gt;  lt;div class="grid-item"gt;  lt;h4gt;lt;stronggt;Wecandoolt;/stronggt;lt;/h4gt;  lt;p style="text-align: left;"gt;  lt;a href="https://la-box-cadeau.com/wecandoo/"gt;  lt;img class="size-medium wp-image-28876 alignleft" src="https://la-box-cadeau.com/wp-  content/uploads/2021/10/wecandoo-03-130x130-1.jpg" alt="box cadeau wecandoo" width="100" height="100" /gt;  lt;/agt;  Un site qui répertorie les meilleurs artisans qui proposent des ateliers découverte autour de chez vous  lt;/pgt;   lt;divgt;  lt;a class="button button1" href="https://wecandoo.fr/#ae432"gt;Site de la box  lt;/agt;  lt;a class="button button2" href="https://www.w3docs.com/"gt;Box bièreslt;/agt;  lt;a class="button button3" href="https://la-box-cadeau.com/wecandoo/"gt;En savoir plus lt;/agt;  lt;/divgt;  lt;stronggt;Box a partir de : 19,99lt;/stronggt;

Обратите также внимание, что CSS был немного исправлен, поместив все общие стили для кнопок в один класс и просто добавив различия (в данном случае цвет фона) в отдельные классы buttonn.

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

1. спасибо, это очень помогает, как вы можете видеть, я новичок в этой теме css …

2. но теперь кажется, что сломать адаптивность для планшетов и мобильных телефонов, если я включу эту .button .button2 button3 с некоторыми css

3. Как указано в ответе, якорным элементам были даны размеры, чтобы мы могли видеть их в виде коробок. Я не знаю, как вы создаете эти коробки. Чтобы быть отзывчивым, но в то же время держать их в одной строке, вы, вероятно, захотите определить их размер в процентах от области просмотра.

Метки: