无法将复选框移动到右侧

时间：2018-01-21 21:31:16

标签： html css checkbox

我无法在一条垂直线上移动所有复选框。我不知道我怎么能这样做。因为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>

2 个答案:

答案 0 :(得分：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。

答案 1 :(得分：0)

编辑：这对提问者不起作用，但我保留这个，因为它可能对其他人有用。

您的问题是，您的checkbox类也包含复选框的名称，而不仅仅是复选框本身。将您的<input>移到另一个班级，然后只将其移到右侧。

<label class="checkbox"> <!-- Outer container -->
    <i class="fas fa-utensils"></i><a class="icontext">Zdravá strava</a> <!-- Text -->
    <input id="check1" type="checkbox" onchange="console.log('changed');"> <!-- Checkbox -->
    <span></span>
</label>
相关问题
最新问题