Question

我从来没有问过有关CSS的问题，因为我通常能够自己解决这些问题，但由于某些原因，这让我很难过。

我正在使用我从网站上获得的自定义复选框。复选框在CSS中呈现。该复选框包含在带边框的DIV中。但是，复选框的CSS中的某些内容导致DIV创建垂直滚动条。我想要的是让DIV根据内容调整高度，而不是创建滚动条。

我的猜测是它是高度或行高属性 - 或者两者都是：

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 31px;
    height: 18px; 
    display: block;
    line-height: 18px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
}

我在这里重新创建了问题：http://codepen.io/anon/pen/OPLYxx

删除行高并不能解决问题。但是，如果我删除了height属性，滚动条会消失，但复选框会搞乱。

我不知道如何解决此问题，任何帮助将不胜感激。谢谢！

编辑：抱歉，我之前应该提到这一点。例如，我将宽度设置为特定值以重新创建问题。但是在实际页面中，它设置为100％。当我缩小页面时（例如移动设备）并且DIV的宽度更改为示例中显示的大小时，问题就出现了。

Answer 1

我用以下代码替换了rmtest CSS部分：

#rmtest {
    background: #f5f5f5;
    padding-bottom: 15px;
    border: 1px #d7d7d7 solid;
    width: 265px;
}

对我来说很好看。

Answer 2

http://codepen.io/anon/pen/emOaMo

我认为这就是你想要的？需要修复你的复选框。

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 31px;
    height: 18px; 
    line-height: 40px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
}

更新：

http://codepen.io/anon/pen/emOaMo

input[type=checkbox].css-checkbox {
  position: absolute; 
  z-index:-1000; 
  left:-1000px; 
  overflow: auto; 
  clip: rect(0 0 0 0); 
  height:1px; 
  width:1px; 
  margin:-1px; 
  padding:0; 
  border:0;
}

#rmtest {
  background: #f5f5f5;
  overflow: auto;
  border: 1px #d7d7d7 solid;
  width: 269px;
  display:table-cell;
  vertical-align: middle;
  height: 100px;
}

更改#rmtest的高度，然后

行高/高度属性导致<div>滚动？</div>

2 个答案: