У меня установлен флажок Vue, и браузеры отображают их в отдельной строке. Я хочу, чтобы все флажки располагались рядом, пока они не переносятся на новую строку и т. Д.
Сгенерированный код использует блок DIV, но даже если я изменил его на SPAN не было никакого эффекта. Слишком много CSS классов написано предыдущим разработчиком. Я пытался их отключить, но либо ничего не делал, либо вообще разрушал рендеринг. Я извлек минимальную воспроизводимую выборку на https://codesandbox.io/s/blue-currying-woeh6
Код очень большой, и я бы предпочел опубликовать небольшую часть, но люди опускают вопросы с неполными источниками. Так что извините, я вставил это сюда. Я рекомендую открыть коды и окно, так как его легче читать.
Флажок. vue
<template>
<ValidationProvider
class="relative"
tag="div"
v-model="innerValue"
:vid="vid"
:rules="rules"
:name="name || label"
v-slot="{ errors, required }"
>
<input
class="atoms__checkbox-input"
:class="{ 'border-gray-700': !errors[0], 'border-red-600': errors[0] }"
:id="identifier"
v-model="innerValue"
:value="identifier"
type="checkbox"
ref="input"
>
<label :for="identifier" class="atoms__checkbox-label">
<span>{{label}}</span>
</label>
</ValidationProvider>
</template>
<script>
import { ValidationProvider } from 'vee-validate';
export default {
props: {
vid: {
type: String,
default: undefined,
},
identifier: {
type: String,
default: undefined,
},
name: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
rules: {
type: [Object, String],
default: '',
},
value: {
type: null,
default: '',
},
checked: {
type: Boolean,
default: false,
},
},
components: {
ValidationProvider,
},
data: () => ({
innerValue: null,
}),
watch: {
innerValue(value) {
this.$emit('input', value);
},
},
};
</script>
<style>
.relative{
clear: both;
}
.atoms__checkbox-label {
position: relative;
min-height: 34px;
display: block;
padding-left: 40px;
cursor: pointer;
}
.atoms__checkbox-label:before {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 4px;
width: 16px;
height: 15px;
border: 2px solid #9e9e9e;
}
.atoms__checkbox-label span {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.atoms__checkbox-label:after {
content: '';
display: block;
width: 20px;
height: 5px;
border-bottom: 2px solid #ffd302;
border-left: 2px solid #ffd302;
-webkit-transform: rotate(-45deg) scale(0);
-moz-transform: rotate(-45deg) scale(0);
-ms-transform: rotate(-45deg) scale(0);
transform: rotate(-45deg) scale(0);
position: absolute;
top: 7px;
left: 8px;
}
.atoms__checkbox-input[type="checkbox"] {
opacity: 0.00000001;
position: absolute;
}
.atoms__checkbox-input[type="checkbox"]:checked ~ label::before {
color: #ffd302;
border-left: 2px solid black;
border-top: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
.atoms__checkbox-input[type="checkbox"]:checked ~ label::after {
-webkit-transform: rotate(-45deg) scale(1);
-moz-transform: rotate(-45deg) scale(1);
-ms-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
}
</style>
Компонент. vue
<template>
<div class="sign-up-wrapper">
<div class="sign-up__heading">
<h2>Form</h2>
</div>
<ValidationObserver ref="form">
<form>
<div class="sign-up-form__label">
<label for="vehicle">Vehicles</label>
</div>
<div class="sign-up-form__input">
<Checkbox v-model="bike" label="bike" name="vehicle" identifier="bike"/>
<Checkbox v-model="car" label="car" name="vehicle" identifier="car"/>
<Checkbox v-model="bus" label="bus" name="vehicle" identifier="bus"/>
<Checkbox v-model="van" label="van" name="vehicle" identifier="van"/>
<Checkbox v-model="truck" label="truck" name="vehicle" identifier="truck"/>
<Checkbox v-model="tramway" label="tramway" name="vehicle" identifier="tramway"/>
</div>
</form>
</ValidationObserver>
</div>
</template>
<script>
import { ValidationObserver } from "vee-validate";
import Checkbox from "@/components/Checkbox.vue";
export default {
name: "HelloWorld",
components: {
ValidationObserver,
Checkbox
},
data: () => ({
bike: null,
car: null,
bus: null,
van: null,
truck: null,
tramway: null
})
};
</script>
<style>
.sign-up-wrapper {
display: grid;
grid-template-columns: 1fr;
margin: 0 auto;
max-width: 80%;
padding: 1em 0;
}
@media all and (min-width: 850px) {
.sign-up {
grid-template-columns: 1fr;
max-width: 80%;
}
}
.atoms__checkbox {
width: 9em;
float: left;
}
.atoms__radio {
width: 9em;
float: left;
}
#sign-up-form-wrapper {
display: grid;
margin-top: 40px;
}
#sign-up-form-success {
color: green;
}
.sign-up-form__label {
font-size: 25px;
clear: both;
margin-bottom: 20px;
font-weight: normal;
}
.sign-up-form__errors-heading {
color: rgb(209, 49, 49);
}
.sign-up-form__year {
width: 4em;
}
.sign-up-form__input {
width: 100%;
font-size: 20px;
overflow: auto;
}
select {
font-size: 20px;
padding: 8px;
margin-bottom: 20px;
}
.sign-up-form__button {
width: 100%;
}
@media all and (min-width: 850px) {
.sign-up-form__button {
width: 30%;
}
#sign-up-form-wrapper {
grid-template-columns: 0.3fr 1fr;
}
.sign-up-form__input {
/*width: 70%;*/
}
}
</style>
Приложение. vue
<template>
<div>
<header class="app__header-wrapper">
<div class="app__header">
<div class="app__header-logo-image">
</div>
<div class="app__header-logo-text">
<h1>BUD</h1>
<h2>Slogan</h2>
</div>
</div>
</header>
<main>
<HelloWorld/>
</main>
<footer class="app__footer">
<ul class="app__footer-link-list">
<li class="app__footer-link-list-item"><router-link to="/help">Help</router-link></li>
</ul>
</footer>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
}
};
</script>
<style>
body {
margin: 0;
padding: 0;
color: #000;
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.app__header-wrapper {
background: #000;
color: #FFF;
border-bottom: 5px solid #ffd302;
}
.app__header {
display: grid;
grid-template-columns: 0.1fr 1fr 1fr;
grid-gap: 1em;
margin: 0 auto;
max-width: 80%;
padding: 1em 0;
}
.app__header-logo-text {
grid-column: 2 / span 2;
padding-top: 30px;
line-height: 23px;
font-size: 12px;
}
.app__header-sign-in {
grid-column: auto / span 3;
font-size: 16px;
a {
color: #ffd302;
&.router-link-exact-active {
color: #a08500;
}
}
a:hover {
color: #ffe45b;
}
}
.app__footer {
background: #000;
color: #ffd302;
padding: 5px 0 15px 0;
}
.app__footer-link-list {
margin: 0 auto;
max-width: 80%;
padding: 15px 15px 0 0;
list-style: none;
}
.app__footer-link-list-item {
display: inline-block;
}
.app__footer-link-list-item a {
color: #ffe45b;
text-decoration: none;
}
.app__footer-link-list-item a:visited {
color: #ffd302;
text-decoration: none;
}
.app__footer-link-list-item a:hover {
color: #ffd302;
text-decoration: underline;
}
.app__footer-link-list-item:after {
content: "\b7\a0";
padding: 0 10px 0 10px;
}
.app__footer-link-list-item:last-child:after {
content: "";
}
@media all and (min-width: 850px) {
.app__header-wrapper {
height: 200px;
}
.app__header-sign-in {
grid-column: 3 / 3;
padding-top: 80px;
text-align: right;
font-size: 16px;
}
.app__header-logo-text {
grid-column: 2 / 3;
padding-top: 50px;
line-height: 20px;
}
.app__header-logo-image {
grid-column: 1 / 1;
}
}
</style>