CSSディスプレイのインラインで1行ではなく2行になる

Question

レイアウトが表示要素なしでうまく見える場合はどうすればいいですか？display: noneを動的に設定して、display: blockにレイアウトを破棄する必要があります。 「通常の」ディスプレイはありませんか？私はinlineを試しましたが、どちらもうまくいきません。最初にdisplay: noneに設定して、表示プロパティが「通常」でないかのようにしたいと思っています。

<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

ソリューションは、別のui gridを追加しました。私は別の答えHow to align my label and input field

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

Answer 2

あなたの質問を理解したら、display:none;で上書きした後、要素の初期状態のdisplayに戻したいと思っていますか？もしそうなら、単に：

#element { 
    display: initial; 
} 

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