CSS 内联显示使两行而不是一行

Question

如果我的布局在没有显示元素的情况下看起来不错，我应该使用什么，那么我必须添加动态设置的 display: none 到 display: block 这会破坏我的布局。没有"normal"显示吗？我试过 inline 也没用。我想先将它设置为 display: none，然后我希望它看起来没有或 "normal" 显示属性。

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
          type="text/css">


    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="center jumbotron">
        <div class="container" style="margin-top:20px; width: 75%">
           <h4 class="ui header">Semantic UI Form</h4>

                <form  name="formular" class="ui form">
                    <div class="ui grid">
                        <div class="four wide column ">
                            <label>First Name</label>
                        </div>
                        <div class="twelve wide column">
                            <input type="text" name="first-name" placeholder="First Name">
                        </div>
                    </div>
                    <div class="ui grid">
                        <div class="four wide column ">
                            <label>Last Name</label>
                        </div>
                        <div class="twelve wide column">
                            <input type="text" name="first-name" placeholder="Last Name">
                        </div>
                    </div>

             

 <div class="ui grid" id="category_contents">
                        <div class="four wide column ">
                            <label>Last Name</label>
                        </div>
                        <div class="twelve wide column">
                            <input type="text" name="first-name" placeholder="Last Name">
                        </div>
                    </div>

                  <div style="display: inline;" id="categor2y_contents" class="ui grid">
                        <div  class="four wide column ">
                            <label>Last Name</label>
                        </div>
                        <div class="twelve wide column">
                            <input type="text" name="first-name" placeholder="Last Name">
                        </div>
                    </div>



                <!--    <button class="ui button" type="submit">Submit</button> -->
                </form>
            </div>








        </div>
    </div>


</div>

更新

解决方案是添加一个额外的 <div class="ui grid"> 但我怎么知道的？

Answer 1

如果我理解您的问题，您是想在用 display:none; 覆盖元素后恢复到元素的初始状态 display 对吗？如果是这样，只需：

#element {
    display: initial;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

Answer 2

解决方案是添加另一个 ui grid。我从另一个答案

找到了这个解决方案

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
          type="text/css">


    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="center jumbotron">
        <div class="container" style="margin-top:20px; width: 75%">
           <h4 class="ui header">Semantic UI Form</h4>

                <form  name="formular" class="ui form">
                    <div class="ui grid">
                        <div class="four wide column ">
                            <label>First Name</label>
                        </div>
                        <div class="twelve wide column">
                            <input type="text" name="first-name" placeholder="First Name">
                        </div>
                    </div>
                    <div class="ui grid">
                        <div class="four wide column ">
                            <label>Last Name</label>
                        </div>
                        <div class="twelve wide column">
                            <input type="text" name="first-name" placeholder="Last Name">
                        </div>
                    </div>

             

 <div style="display: block;" class="ui grid" id="category_contents">
                       
 <div class="ui grid">
             
                        <div  class="four wide column ">
                            <label>Last N2ame</label>
                        </div>
                        <div class="twelve wide column">
                            <input type="text" name="first-name" placeholder="Last Name">
                        </div>
                

</div>

                <!--    <button class="ui button" type="submit">Submit</button> -->
                </form>
            </div>








        </div>
    </div>


</div>

CSS 内联显示使两行而不是一行

CSS display inline makes two rows instead of one

css

semantic-ui