Поля CSS для Firefox
я написал поле CSS для расстояния между флажками. Он отлично работает в Chrome, но не в Firefox.
вот CSS
.vehicle-types {
float:left;
width:100%;
margin: 6px 0;
.check-vehicle {
float:left;
width:100%;
.checkbox-btn {
width: auto;
display: inline-block;
margin-right: 20px;
float:left;
input {
float:left;
width:0 !important;
}
label {
margin:0 !important;
float:left;
}
}
}
}
есть ли какой-либо определенный CSS для браузера Firefox? (скриншоты ниже) Заранее спасибо.
Хром
Fire Fox
Вы имеете в виду Фаерфокс? Mozilla — это компания, а не браузер.
заверните флажки в div и используйте flexbox + justify-content. не используйте !important
@Vlad Flexbox здесь - излишество.
это Firefox, а не Mozilla, извините за это
Судя по скриншотам, flexbox кажется идеальным решением.
@Влад я проверю
@PraveenKumarPurushothaman хорошо, я просматриваю свой код. я обновлю, как только закончу
@ShashiDharanKrish Просто ширина делает что-то? У вас есть боковые панели?
@PraveenKumarPurushothaman отлично работает в Firefox, когда я устанавливаю поле как -5px, но не в Chrome. если я установлю его как 0, то это нормально для Chrome, а не для Firefox.
@PraveenKumarPurushothaman да, у меня есть боковая панель
@PraveenKumarPurushothaman Я не понимаю, как дубликат актуален .. между ними нет никакой связи
@TemaniAfif Не могли бы вы помочь мне с этим?
мы не можем помочь со скриншотом, нам нужен код
@TemaniAfif Я добавил код.
недостаточно кода .. CSS бесполезен сам по себе, нам нужен полный код (HTML+CSS), чтобы мы могли запустить его и увидеть результат
Что инспектор говорит вам о фактических полях/пробелах?
@TemaniAfif Вы должны увидеть первую версию этого поста.
@PraveenKumarPurushothaman Я видел это, и это все еще не актуально. Он спрашивает, почему код не работает, а не как настроить таргетинг на конкретный браузер.
Ответы 3
Итак, я писал этот ответ до того, как вы отправили свой отредактированный пост. Мне все еще нужно просмотреть код, но в качестве альтернативы вы можете попробовать это и посмотреть, работает ли оно или нет.
Обновить: У вас есть только общий css, который все еще очень сложно понять
Идеальным решением для того, чтобы все было на одной строке, было бы do.
.parent-div {
display: flex;
flex-direction: row;
justify-content: space-between
}
.child-div {
align-items: center;
display: flex;
flex-direction: row;
}
.create-box {
height: 30px;
width: 30px;
border: 1px solid black;
}
p {
margin-left: 5px;
}<div class = "parent-div">
<div class = "child-div">
<span class = "create-box"> </span>
<p> checkBox 1 </p>
</div>
<div class = "child-div">
<span class = "create-box"> </span>
<p> checkBox 1 </p>
</div>
<div class = "child-div">
<span class = "create-box"> </span>
<p> checkBox 1 </p>
</div>
</div>
В приведенном выше коде я использовал flex.
flex-direction говорит о том, хотите ли вы, чтобы ваши элементы div располагались в строке или в столбцах, т.е. рассмотрите этот класс несколько эквивалентно для начальная загрузкаrow. (если вы использовали бутстрап ранее)
justify-content: space-between: space-between дает равное расстояние между каждым квадратом, но не между ним и контейнером.
Примечание. Вы могли бы также использовать пространство вокруг
Space-around помещает одинаковую подушку пространства с обеих сторон квадрата — , что означает, что пространство между крайними квадратами и контейнером составляет половину пространства между двумя квадратами (каждый квадрат обеспечивает неперекрывающийся равный размер поля, таким образом, удваивая космос).
align-items: center; просто выровняйте все внутри div по центру по оси xy
Я нашел эту статью очень полезной при изучении флексбоксы (может помочь и вам)
Я попробовал ваш ответ на моем коде. Это просто работает как очарование. Вы спасли мой день. Благодаря тонну.
Если это поможет вам/решит вашу проблему. Проголосуйте/отметьте этот ответ. Рад помочь вам.
проголосовал за ответ, он не отображается, так как моя репутация ниже 15.
Отметьте это ответом в этом случае (вы видите этот значок галочки?)
У меня тоже была такая проблема, но с IE, в следующий раз вы можете использовать этот код он будет отображаться только в firefox, вы можете редактировать, что хотите, и он будет отображаться только в firefox
@-moz-document url-prefix() {
//just write the code here
}
Я знаю, что это не проблема из вашего кода, но если бы это было так, вы могли бы перейти к: https://caniuse.com/
и проверьте, ваш ли это код
Смотрите, версия Firefox также добавляет это поле к первому дочернему элементу.
Чтобы этого избежать, используйте:
.checkbox-btn:not(:first-child) {
...
margin-right: 20px;
...
}
Покажите нам два снимка экрана, один в Chrome и один в Firefox, и скажите, что не так. До тех пор это выглядит как проблема с маржей в Firefox, и это дубликат. Не используйте
!important. Это плохая практика.