Семантический интерфейс Как разместить правые элементы в меню

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, где вы хотите его влево или вправо (выше или ниже соответственно). Весь навигатор не реагирует, так что я предлагаю. Если это не преднамеренно.

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