如何做复选框和值之间的间距答案

【问题标题】：How to do the spacing between checkboxes and values如何做复选框和值之间的间距
【发布时间】：2019-01-02 08:58:02
【问题描述】：

在我的 JSP 中，我将列表填充到复选框中。我面临的问题是我无法获得标签和复选框之间的空间。我尝试使用自定义类应用 CSS 样式。但它也不起作用。可以做些什么来解决这个问题？

观点：

<c:forEach items="${permissions}" var="permission">
    <div class="check-box checkbox-margin" style="padding-left: 20px">
        <c:choose>
            <c:when test="${permission.checked}">
                <form:checkbox label="${permission.name}" value="${permission.id}" path="checkedPermissions" checked="checked"/>
            </c:when>
            <c:otherwise>
                <form:checkbox label="${permission.name}" value="${permission.id}" path="checkedPermissions"/>
            </c:otherwise>
        </c:choose>
    </div>
</c:forEach>

样式：

.checkbox-margin {
    text-align:center;
}

.checkbox-margin input{
    margin: 0px 0px 0px 0px;
}

.checkbox-margin label{
    margin: 0px 20px 0px 3px;
}

生成的 HTML 视图：

<div class="check-box checkbox-margin" style="padding-left: 20px">
      <input id="checkedPermissions1" name="checkedPermissions" checked="checked" type="checkbox" value="1">
         <label for="checkedPermissions1">ROLE_LOGIN</label><input type="hidden" name="_checkedPermissions" value="on">

</div>

【问题讨论】：

尝试为标签填充padding-left: 20px;
标签的左边距
你的意思是在css类中？ .checkbox-margin 标签{ padding-left: 20px; }
@JohnDoe921 是的
@Sheedo 已添加到问题中

标签： html css jsp checkboxlist

【解决方案1】：

删除这个css：

.checkbox-margin label{
    margin: 0px 20px 0px 3px;
}

在输入和标签之间使用&nbsp;

或

在css中

.checkbox-margin label{
    margin-left: 10px !important;
}

【讨论】：

【解决方案2】：

这将是一个解决方案，将input 和label 放在div 中。然后给 div 一个边距。

<body>
  <style>
    .check-box{
      margin: 0;
      padding: 0;
      border: 0;
    }
    .contain{
      margin-left: 50px;
    }
  </style>
  <div class="check-box">
    <h2>Premissions</h2>
    <div class="contain">
      <input id="checkedPermissions1" name="checkedPermissions" checked="checked" type="checkbox" value="1">
      <label for="checkedPermissions1">ROLE_LOGIN</label><input type="hidden" name="_checkedPermissions" value="on">
    </div>
    <div class="contain">
      <input id="checkedPermissions2" name="checkedPermissions" checked="checked" type="checkbox" value="1">
      <label for="checkedPermissions2">ROLE_SOMETHING</label><input type="hidden" name="_checkedPermissions" value="on">
    </div>
  </div>
</body>

Here is a screendump of the result

【讨论】：

【解决方案3】：

根据我的经验，我发现 Suraj 的解决方案最适合我所面临的问题。

我正在向 DOM 中注入一个输入，以使用以下内容与现有元素并排放置：-

var filterOptions = ['001','002','005','009'];
// Inject radio inputs Using filterOptions
$.each(filterOptions, function (ind, val) {
    $('<input type="checkbox" class="checkClass siteBox" name="sitename" value="'+val+'" id="site-'+val+'" checked><label for="site-'+val+'">Site '+val+'</label><br>').insertBefore('#allSiteSelector');
});

这样做时，我注意到输入和标签之间的元素间距与现有 DOM 元素的间距不同。

使用注入的元素，标签和输入之间没有间隙。

解决方法是在输入和标签之间放置一个&nbsp;。

var filterOptions = ['001','002','005','009'];
// Inject radio inputs Using filterOptions 
$.each(filterOptions, function (ind, val) {
    $('<input type="checkbox" class="checkClass siteBox" name="sitename" value="'+val+'" id="site-'+val+'" checked><label for="site-'+val+'">Site '+val+'</label><br>').insertBefore('#allSiteSelector');
});

// Set siteid radio inputs Using filterOptions
var filterOptions= ['001']

// Inject WITHOUT NBSP
$.each(filterOptions, function (ind, val) {
    var input = '<input type="checkbox" class="checkClass siteBox" name="sitename" value="' + val + '" id="site-' + val + '" checked>';
    var label = '<label for="site-' + val + '">No Non-Breaking Space ' + val + '</label><br>';
    $(input+label).insertBefore('#sitenameAll');
});

// Inject WITH NBSP
$.each(filterOptions, function (ind, val) {
    var input = '<input type="checkbox" class="checkClass siteBox" name="sitename" value="' + val + '" id="site-' + val + '" checked>';
    var nbsp = '&nbsp';
    var label = '<label for="site-' + val + '">With Non-Breaking Space ' + val + '</label><br>';
    $(input+nbsp+label).insertBefore('#sitenameAll');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cd-filter-content cd-filters list" id="filters">
		<h4>Site Filter</h4>
		<input type="checkbox" class="checkClass siteBox" name="sitename" value="001" id="001" checked>
		<label for="001">001 Site 1</label><br>
		<input type="checkbox" class="checkClass siteBox" name="sitename" value="002" id="002" checked>
		<label for="002">002 Site 2</label><br>
		<input type="checkbox" class="checkClass siteBox" name="sitename" value="003" id="003" checked>
		<label for="003">003 Site 3</label><br>
		<input type="checkbox" class="checkClass siteBox" name="sitename" value="004" id="004" checked>
		<label for="004">003 Site 4</label><br>
		<input type="checkbox" class="checkClass" name="sitename" value="All" id="sitenameAll" checked>
		<label for="sitenameAll">All</label>
		<br>
	</ul>

【讨论】：