html - 无法向右移动复选框

Question

我无法在一条垂直线上向右移动所有复选框。我不知道我该怎么做。因为 float:right 添加到 .checkbox 会将所有内容移动到右边。

您可以在网站上查看以更好地理解我的问题(由于嵌入视频和大图像，它加载缓慢)代码可能看起来很乱我正在学习抱歉。

body:not(#foo) input[type='checkbox'] {
  opacity: 0;
}

.checkbox,
.radio {
  position: relative;
  cursor: pointer;
  padding: 1em;
  display: inline-block;
}

.checkbox::-moz-selection,
.radio::-moz-selection {
  background: transparent;
}

.checkbox::selection,
.radio::selection {
  background: transparent;
}

.checkbox input+span,
.radio input+span {
  border: 1px solid black;
  background: white;
  content: "";
  display: inline-block;
  margin: 0 .5em 9px 0;
  padding: 0;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

.checkbox input+span::after,
.radio input+span::after {
  content: "";
  display: block;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}

@media screen and (min-width: 768px) {
  .checkbox:hover input+span,
  .radio:hover input+span {
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}

.checkbox input:active+span,
.radio input:active+span {
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.checkbox input:focus+span,
.radio input:focus+span {
  -webkit-box-shadow: 0 0 0 3px lightblue;
  box-shadow: 0 0 0 3px lightblue;
}

.checkbox input:checked+span::after,
.radio input:checked+span::after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.checkbox input,
.radio input {
  position: absolute;
  cursor: pointer;
  opacity: 0;
}

.checkbox input+span {
  border-radius: 2px;
}

.checkbox input+span::after {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTMuNzA3LDMyLjI5MyAxMi4yOTMsMzMuODU0IDI0LjI5Myw0NiAyNS43MDcsNDYgNDkuNzA3LDIxLjg1NCA0OC4yOTMsMjAuMzY2IDI1LDQzLjYyMyAiLz48L2c+PC9zdmc+) no-repeat center;
  background-size: contain;
  width: 1em;
  height: 1em;
}

.radio input+span {
  border-radius: 100%;
}

.radio input+span::after {
  border-radius: 100%;
  margin: .65em;
  width: .75em;
  height: .75em;
}

.radio input:checked+span::after {
  background: black;
}

<!-- BEGIN - FILTERS -->
<div class="indexfilters">
  <div class="border">
    <label class="checkbox">
        <i class="fas fa-child"></i><a class="icontext">Starostlivosť o deti</a>
        <input id="check1" type="checkbox" onchange="console.log('changed');">
        <span></span>
        </label><br>
    <label class="checkbox">
        <i class="fas fa-utensils"></i><a class="icontext">Zdravá strava</a>
        <input id="check1" type="checkbox" onchange="console.log('changed');">
        <span></span>
        </label><br>
    <label class="checkbox">
        <i class="fas fa-book"></i><a class="icontext">Recepty</a>
        <input id="check1" type="checkbox" onchange="console.log('changed');">
        <span></span>
        </label>
    <label class="checkbox">
        <i class="fas fa-crosshairs"></i><a class="icontext">Potravinové podvody</a>
        <input id="check1" type="checkbox" onchange="console.log('changed');">
        <span></span>
        </label>
    <label class="checkbox">
        <i class="fas fa-ban"></i><a class="icontext">Jedy v potrave</a>
        <input id="check1" type="checkbox" onchange="console.log('changed');">
        <span></span>
        </label>
    <label class="checkbox">
        <i class="fas fa-industry"></i><a class="icontext">Potravinový priemysel</a>
        <input id="check1" type="checkbox" onchange="console.log('changed');">
        <span></span>
        </label>
    <label class="checkbox">
        <i class="fas fa-recycle"></i><a class="icontext">Recyklovanie</a>
        <input id="check1" type="checkbox" onchange="console.log('changed');">
        <span></span>
        </label>
    <div class="divbtnfilter">
      <a class="btnfilter">Filtrovať</a>
    </div>
  </div>
</div>

Answer 1

我想这就是您要找的:

.border {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

.border>.checkbox {
  flex: 1 0 100%;
  text-align: right;
  display: flex;
}

.checkbox a {
  flex-grow: 1;
  padding: 0 1rem;
}

.divbtnfilter {
  padding: 1rem;
}

body:not(#foo) input[type='checkbox'] {
  opacity: 0;
}

.checkbox,
.radio {
  position: relative;
  cursor: pointer;
  padding: 1em;
  display: inline-block;
}

.checkbox::-moz-selection,
.radio::-moz-selection {
  background: transparent;
}

.checkbox::selection,
.radio::selection {
  background: transparent;
}

.checkbox input+span,
.radio input+span {
  border: 1px solid black;
  background: white;
  content: "";
  display: inline-block;
  margin: 0 .5em 9px 0;
  padding: 0;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

.checkbox input+span::after,
.radio input+span::after {
  content: "";
  display: block;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}

@media screen and (min-width: 768px) {
  .checkbox:hover input+span,
  .radio:hover input+span {
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}

.checkbox input:active+span,
.radio input:active+span {
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.checkbox input:focus+span,
.radio input:focus+span {
  -webkit-box-shadow: 0 0 0 3px lightblue;
  box-shadow: 0 0 0 3px lightblue;
}

.checkbox input:checked+span::after,
.radio input:checked+span::after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.checkbox input,
.radio input {
  position: absolute;
  cursor: pointer;
  opacity: 0;
}

.checkbox input+span {
  border-radius: 2px;
}

.checkbox input+span::after {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTMuNzA3LDMyLjI5MyAxMi4yOTMsMzMuODU0IDI0LjI5Myw0NiAyNS43MDcsNDYgNDkuNzA3LDIxLjg1NCA0OC4yOTMsMjAuMzY2IDI1LDQzLjYyMyAiLz48L2c+PC9zdmc+) no-repeat center;
  background-size: contain;
  width: 1em;
  height: 1em;
}

.radio input+span {
  border-radius: 100%;
}

.radio input+span::after {
  border-radius: 100%;
  margin: .65em;
  width: .75em;
  height: .75em;
}

.radio input:checked+span::after {
  background: black;
}

.border {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

.border>.checkbox {
  flex: 1 0 100%;
  text-align: right;
  display: flex;
}

.checkbox a {
  flex-grow: 1;
  padding: 0 1rem;
}

.divbtnfilter {
  padding: 1rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="indexfilters">
  <div class="border">
    <label class="checkbox">
      <i class="fa fa-child"></i><a class="icontext">Starostlivosť o deti</a>
      <input id="check1" type="checkbox" onchange="console.log('changed');">
      
      <span></span>
    </label>
    <label class="checkbox">
      <i class="fa fa-cutlery"></i><a class="icontext">Zdravá strava</a>
      <input id="check1" type="checkbox" onchange="console.log('changed');">
      <span></span>
    </label>
    <label class="checkbox">
      <i class="fa fa-book"></i><a class="icontext">Recepty</a>
      <input id="check1" type="checkbox" onchange="console.log('changed');">
      <span></span>
    </label>
    <label class="checkbox">
      <i class="fa fa-crosshairs"></i><a class="icontext">Potravinové podvody</a>
      <input id="check1" type="checkbox" onchange="console.log('changed');">
      <span></span>
    </label>
    <label class="checkbox">
      <i class="fa fa-ban"></i><a class="icontext">Jedy v potrave</a>
      <input id="check1" type="checkbox" onchange="console.log('changed');">
      <span></span>
    </label>
    <label class="checkbox">
      <i class="fa fa-industry"></i><a class="icontext">Potravinový priemysel</a>
      <input id="check1" type="checkbox" onchange="console.log('changed');">
      <span></span>
    </label>
    <label class="checkbox">
      <i class="fa fa-recycle"></i><a class="icontext">Recyklovanie</a>
      <input id="check1" type="checkbox" onchange="console.log('changed');">
      <span></span>
    </label>
    <div class="divbtnfilter">
      <a class="btnfilter">Filtrovať</a>
    </div>
  </div>
</div>

附带说明一下，您的标记和 CSS 远非最佳。

---

这是一个更易于维护的代码版本(根据评论):

[].map.call(document.querySelectorAll(".checkboxes a"), function(element){
	element.addEventListener("click", function(event) {
		console.log(element.innerHTML + ' checked: '+!element.nextElementSibling.checked)
	});
});

body:not(#foo) input[type='checkbox'] {
  opacity: 0;
}

.checkboxes label,
.radio {
  position: relative;
  cursor: pointer;
  padding: 1em;
  display: inline-block;
}

.checkboxes label::-moz-selection,
.radio::-moz-selection {
  background: transparent;
}

.checkboxes label::selection,
.radio::selection {
  background: transparent;
}

.checkboxes input+span,
.radio input+span {
  border: 1px solid black;
  background: white;
  content: "";
  display: inline-block;
  margin: 0 .5em 9px 0;
  padding: 0;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

.checkboxes input+span::after,
.radio input+span::after {
  content: "";
  display: block;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}

@media screen and (min-width: 768px) {
  .checkboxes label:hover input+span,
  .radio:hover input+span {
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}

.checkboxes input:active+span,
.radio input:active+span {
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.checkboxes input:focus+span,
.radio input:focus+span {
  -webkit-box-shadow: 0 0 0 3px lightblue;
  box-shadow: 0 0 0 3px lightblue;
}

.checkboxes input:checked+span::after,
.radio input:checked+span::after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.checkboxes input,
.radio input {
  position: absolute;
  cursor: pointer;
  opacity: 0;
}

.checkboxes input+span {
  border-radius: 2px;
}

.checkboxes input+span::after {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTMuNzA3LDMyLjI5MyAxMi4yOTMsMzMuODU0IDI0LjI5Myw0NiAyNS43MDcsNDYgNDkuNzA3LDIxLjg1NCA0OC4yOTMsMjAuMzY2IDI1LDQzLjYyMyAiLz48L2c+PC9zdmc+) no-repeat center;
  background-size: contain;
  width: 1em;
  height: 1em;
}

.radio input+span {
  border-radius: 100%;
}

.radio input+span::after {
  border-radius: 100%;
  margin: .65em;
  width: .75em;
  height: .75em;
}

.radio input:checked+span::after {
  background: black;
}

.checkboxes {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

.checkboxes>label {
  flex: 1 0 100%;
  text-align: right;
  display: flex;
}

.checkboxes a {
  flex-grow: 1;
  padding: 0 1rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="indexfilters">
  <div class="checkboxes">
    <label>
      <i class="fa fa-child"></i><a>Starostlivosť o deti</a>
      <input type="checkbox">
      <span></span>
    </label>
    <label>
      <i class="fa fa-cutlery"></i><a>Zdravá strava</a>
      <input type="checkbox">
      <span></span>
    </label>
    <label>
      <i class="fa fa-book"></i><a>Recepty</a>
      <input type="checkbox">
      <span></span>
    </label>
    <label>
      <i class="fa fa-crosshairs"></i><a>Potravinové podvody</a>
      <input type="checkbox">
      <span></span>
    </label>
    <label>
      <i class="fa fa-ban"></i><a>Jedy v potrave</a>
      <input type="checkbox">
      <span></span>
    </label>
    <label>
      <i class="fa fa-industry"></i><a>Potravinový priemysel</a>
      <input type="checkbox">
      <span></span>
    </label>
    <label>
      <i class="fa fa-recycle"></i><a class="icontext">Recyklovanie</a>
      <input type="checkbox">
      <span></span>
    </label>
    <div class="divbtnfilter">
      <a class="btnfilter">Filtrovať</a>
    </div>
  </div>
</div>

我做了什么:

• 我没有向所有子级添加相同的类，而是向父级添加了一个类并从子级中删除了该类，更新了 CSS
• 删除了所有重复的 ID，
• 删除了类似的onclick并添加了一个简单的脚本(该脚本应该在 DOM.ready 事件上运行)

有很多关于编码最佳实践的阅读和学习，但您应该开始 here .