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的位置。整个导航都没有响应，所以我建议这样做。除非那是故意的。

＆＃13;

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

＆＃13;

语义UI如何在菜单中放置正确的项目

1 个答案: