Question

如果我的布局在没有显示元素的情况下看起来很好，我应该使用什么，然后我必须添加动态设置为display: none的{{1}}，这会破坏我的布局。没有＆＃34;正常＆＃34;显示？我试过了display: block但它也没有用。我想首先将其设置为inline，然后我希望它看起来没有或者＃34;正常＆＃34;显示属性。

＆＃13;

display: none

＆＃13;

更新

解决方案是添加额外的<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">  <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>  </form> </div> </div> </div> </div>，但我该怎么知道呢？

Answer 1

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

#element {
    display: initial;
}

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

Answer 2

解决方案是添加另一个ui grid。我从另一个答案How to align my label and input field

中找到了这个解决方案

＆＃13;

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

＆＃13;

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

2 个答案: