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;
}

将li布局显示为flex

1 个答案: