Question

我正在使用清算段清除浮动按钮，但该细分似乎没有扩展到其内容的高度。

如何才能让它扩展到适合内容的高度？

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

语义UI：获取清算段以扩展到其内容的高度

1 个答案: