父母身高没有覆盖孩子的填充

debugcn 发表于 Dev

奥利弗·吉斯

以下是我的代码的功能片段，其中包含该问题。我正在将无线电输入变成药丸/按钮。

我只是难倒为什么单选按钮高度的容器没有增长以覆盖其孩子的填充？

#contact label {
  cursor: pointer;
}

#contact label,
#contact input {
  display: block;
}

#contact input[type=radio].radio-btn {
  display: none;
}
#contact .radio-btn + label {
  display: inline;
  padding: 9px;
  border: 1px solid #ccc;
  margin: 0;
  user-select: none;
  box-sizing: border-box;
}
#contact .radio-btn:checked + label {
  transition: ease-out .25s;
  background-color: #e6e6e6;
  border-color: #adadad;
}

#contact .radio-btn-group {
  margin: auto;
}
#contact .radio-btn-group input.radio-btn:first-of-type + label {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
#contact .radio-btn-group input.radio-btn:last-of-type + label {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
#contact .radio-btn-group input.radio-btn:not(:first-of-type) + label {
  margin-left: -1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<form id="contact">
                    <div class="form-group row">
                      <div class="radio-btn-group col-lg-12 col-md-12 col-sm-12">
                        <input id="general" class="radio-btn" type="radio" name="reason" value="general" checked><label for="general">General Enquiry</label><input id="quote" class="radio-btn" type="radio" name="reason" value="quote"><label for="quote">Quote</label><input id="rand" class="radio-btn" type="radio" name="reason" value="rand"><label for="rand">Rand</label>
                      </div>
                    </div>
                  </form>

Mhd Alaa Alhaj

您必须将以下值从更改inline为inline-block：

#contact .radio-btn + label {
  /* display: inline; */
  display: inline-block;
}

参考@Oldskool 对这个问题的回答

内联元素：尊重左右边距和填充，但不尊重顶部和底部

内联块元素：尊重顶部和底部边距和填充

#contact label {
  cursor: pointer;
}

#contact label,
#contact input {
  display: block;
}

#contact input[type=radio].radio-btn {
  display: none;
}
#contact .radio-btn + label {
  display: inline-block;
  padding: 9px;
  border: 1px solid #ccc;
  margin: 0;
  user-select: none;
  box-sizing: border-box;
}
#contact .radio-btn:checked + label {
  transition: ease-out .25s;
  background-color: #e6e6e6;
  border-color: #adadad;
}

#contact .radio-btn-group {
  margin: auto;
}
#contact .radio-btn-group input.radio-btn:first-of-type + label {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
#contact .radio-btn-group input.radio-btn:last-of-type + label {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
#contact .radio-btn-group input.radio-btn:not(:first-of-type) + label {
  margin-left: -1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<form id="contact">
                    <div class="form-group row">
                      <div class="radio-btn-group col-lg-12 col-md-12 col-sm-12">
                        <input id="general" class="radio-btn" type="radio" name="reason" value="general" checked><label for="general">General Enquiry</label><input id="quote" class="radio-btn" type="radio" name="reason" value="quote"><label for="quote">Quote</label><input id="rand" class="radio-btn" type="radio" name="reason" value="rand"><label for="rand">Rand</label>
                      </div>
                    </div>
                  </form>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。