セマンティックUIメニューに適切なアイテムを配置する方法

Question

メニューの右側にログイン、サインアップ、検索のバーアイテムを配置したいが、それらはすべて「スカッシュ」する。どのようにして複数のアイテムを右に配置できますか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.7/semantic.min.js"></script> 
 
<div class="ui menu"> 
 
     <a class="item" href="#">Home</a> 
 
     <a class="item" href="#">About</a> 
 
     <a class="item" href="#">Contact us</a> 
 
     <div class="right item" href="#"> 
 
      <div class="ui icon input"> 
 
       <input type="text" placeholder="Search..."> 
 
       <i class="search icon"></i> 
 
      </div> 
 
      <div class="ui primary button">Sign Up</div> 
 
      <div class="ui button">Log In</div> 
 
     </div> 
 
    </div>

Answer 1

.right.item .ui.input { 
    width:auto; 
    } 

それは同じ行の項目に合わせて、あなたはそれを左または右にしたい場所にボタンのコンテナのdivを移動するために小さくなるので（検索バーコンテナの自動幅を作りますそれぞれ上または下に）検索コンテナdiv。 全体のナビゲーションは反応しません。それは私が示唆するものです。それが意図的でない限り。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.7/semantic.min.js"></script> 
 
<style> 
 
    .right.item .ui.input { 
 
    width:auto; 
 
    } 
 
</style> 
 
<div class="ui menu"> 
 
     <a class="item" href="#">Home</a> 
 
     <a class="item" href="#">About</a> 
 
     <a class="item" href="#">Contact us</a> 
 
     <div class="right item" href="#"> 
 
      <div class="ui primary button">Sign Up</div> 
 
      <div class="ui button">Log In</div> 
 
      <div class="ui icon input"> 
 
       <input type="text" placeholder="Search..."> 
 
       <i class="search icon"></i> 
 
      </div> 
 
     </div> 
 
    </div>