Question

在我的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>

Answer 1

删除此CSS：

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

在输入和标签之间使用 

或

在CSS中

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

Answer 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

Answer 3

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

我正在使用以下命令将输入注入到DOM中，以与现有元素并排放置：-

var filterOptions = ['001','002','005','009'];
// Inject radio inputs Using siteOptions
$.each(siteOptions, 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元素的元素间距不同。

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

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

var filterOptions = ['001','002','005','009'];
// Inject radio inputs Using siteOptions
$.each(siteOptions, 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 siteOptions
var siteOptions = ['001']

// Inject WITHOUT NBSP
$.each(siteOptions, 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(siteOptions, 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>

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

3 个答案: