html - 将 li 布局显示为 flex

Question

谁能帮忙看看为什么下面的代码不能按预期工作:

我想要第二个选项内容(“发生错误时记录并限制......”)包裹在黄色背景中

.flex{
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  position: relative;
  min-height: 0;
  min-width: 0;
}

.flex--1{
  flex: 1 1 auto;
}

.flex--0{
  webkit-flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex: 0;
  flex: 0 0 auto;
}

input[type=radio].radio-button + label.radio-label {
    padding-left: 20px;
    height: 16px;
    display: inline-block;
    line-height: 16px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 14px;
    vertical-align: middle;
    cursor: pointer;
    color: #666666;
}

li {
  list-style-type: none;
  display: list-item;
}

<ul class="form__group">
    <li>Send messages</li>
    <li>
        <input type="radio" name="log-options" class="radio-button" id="log-options-always" value="0">
        <label for="log-options-always" class="radio-label ng-binding">always</label>
    </li>
    <li class="flex" style="background-color: yellow;">
        <div class="flex--1">
            <input type="radio" name="log-options" id="log-options-when-error" class="radio-button" value="1">
            <label for="log-options-when-error" class="radio-label">Log when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs
                and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache
                toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache to</label>
        </div>
        <div class="flex--0 width--lg disabled" ng-class="{disabled: data.Log.AutoLog !== '1'}">
            <input type="text">
            <span>KB</span>
        </div>
    </li>
</ul>

另见 fiddle .

Answer 1

它需要在元素上设置一个 min-height 以随其内容一起增长，因此您可以更改它

input[type=radio].radio-button + label.radio-label {
    padding-left: 20px;
    height: 16px;

对此

input[type=radio].radio-button + label.radio-label {
    padding-left: 20px;
    min-height: 16px;

边注:

尝试使用 CSS 文件(推荐)或内联样式，因为不建议同时使用这两种样式。

所以例如代替这个

<li class="flex" style="background-color: yellow;">

你这样做

HTML

<li class="flex yellowBg">

CSS

.yellowBg {
    background-color: yellow;
}