html - 语义用户界面 : Get clearing segment to expand to the height of it's contents

Question

我正在使用清除段来清除 float 按钮，但该段似乎没有扩展到其内容的高度。

我怎样才能让它扩展它的高度以适应内容？

示例 JSFiddle:https://jsfiddle.net/ftwL2whn/

   /* View rubrics */
   
   .ui.centered.button-header.header {
       position: absolute;
       z-index: 1;
       right: 0;
       left: 0;
   }
   
   .ui.button.floated.button-header {
       position: relative;
       z-index: 2;
   }
   
   .ui.labeled.icon.button > .dark.icon {
       background-color: rgba(0, 0, 0, .1);
   }
   /* Edit Rubric Input*/
   
   .edit.rubric.input {
       display: inline-block;
       margin: 0.2em;
       width: 250px;
   }
   
   .edit.rubric.wide.input {
       display: inline-block;
       width: 300px;
   }
   
   .edit.rubric.narrow.input {
       display: inline-block;
       width: 200px;
   }
   
   .edit.rubric.input input {
       border: none;
       width: 100%;
       border-bottom: 1px solid #D4D4D5;
   }
   
   .edit.rubric.input input:focus {
       outline: none;
       border-color: transparent;
       transition: 300ms ease all;
   }
   
   .bar:after {
       content: '';
       display: block;
       transform: scaleX(0);
       height: 2px;
       background: #48afb9;
       transition: 300ms ease all;
   }
   
   .edit.rubric.input input:focus ~ .bar:after {
       transform: scaleX(1);
   }
   
   .centered .edit.rubric.input input {
       text-align: center;
   }

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet"/>
<br>
<div class="ui container">
    <div class="ui top attached clearing segment">
        <h3 class="ui centered button-header header">
            <div class="edit rubric input">
                <input type="text" value="Phone QA">
                <span class="bar"></span>
            </div>
            <div class="sub header">
                <div class="edit rubric wide input">
                    <input type="text" value="Create and edit rubrics here">
                    <span class="bar"></span>
                </div>
            </div>
        </h3>
        <div class="ui left floated left labeled icon orange button-header button">
            Back
            <i class="dark left arrow icon"></i>
        </div>
    </div>    
</div>

Answer 1

语义添加的清段代码:

.ui.clearing.segment::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;

问题是 height: 0; 的第三个属性 如果您打开您的开发工具并取消选中所选的高度属性，您将看到高度调整以覆盖 100% 的内容。

覆盖它的一种方法是在您的主 CSS 文件中执行类似的操作:

 .ui.clearing.segment::after {
    height: 1.5em;
   }