Question

我的问题是这样的：在导航栏中插入新按钮时，用户名移至最底行。我的目标是使所有内容都在同一行上。

我已经使用过display: inline-block和flex-direction: row，但是没有用。有人可以帮我吗？

HTML

 <div class="col-md-10 p0">
    <div class="collapse navbar-collapse" id="min_navbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="@Url.Action(" Index ", "Home ")">Home</a></li>
            <li><a href="@Url.Action(" Index ", "Tabelas ")">Tabelas</a></li>
            <li><a href="@Url.Action(" Index ", "Registo ")">Registo</a></li>
            <li class="dropdown submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Quem Somos</a>
                <ul class="dropdown-menu other_dropdwn">
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="about-2.html">About Us-2</a></li>
                </ul>
            </li>
            <li class="dropdown submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Serviços</a>
                <ul class="dropdown-menu other_dropdwn">
                    <li><a href="services.html">Services</a></li>
                    <li><a href="services-2.html">Services-2</a></li>
                </ul>
            </li>
            <li class="dropdown submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notícias</a>
                <ul class="dropdown-menu">
                    <li><a href="@Url.Action(" Index ", "News ")">Últimas Notícias</a></li>
                    <li><a href="@Url.Action(" SingleNews ", "News ")">Notícia Singular</a></li>
                </ul>
            </li>
            <li><a href="@Url.Action(" Contact ", "Home ")">Contactos</a></li>
            <li><a href="@Url.Action(" Login ", "Account ")">Login</a></li>
            <li><a href="#" class="nav_searchFrom"><i class="fa fa-search"></i></a></li>
            <li class="dropdown submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-44-512.png" class="rounded circle" style="width: 50px; height: 50px;" /> Nome</a>
                <ul class="dropdown-menu">
                    <li><a href="blog.html">Perfil</a></li>
                    <li><a href="blog-2.html">Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>

Answer 1

您的导航栏可能太大，因此无法使用。但是，如果它不太大，则可能会起作用：

在这里，添加一个类。我选择了floater：

<li class="dropdown submenu floater">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-44-512.png" class="rounded circle" style="width: 50px; height: 50px;" /> Nome</a>
    <ul class="dropdown-menu">
        <li><a href="blog.html">Perfil</a></li>
        <li><a href="blog-2.html">Logout</a></li>
    </ul>
</li>

在CSS中，执行以下操作：

.floater {
    float: right;
}

您的代码中可能会有一些多余的边距或填充，所以我会进行检查。

Answer 2

请考虑考虑从float到flexbox或grid来设置元素的位置！*如今，CSS中具有“杀手级功能”，例如Flexbox甚至更好的CSS Grid（但缺少浏览器支持）。是的，一开始很难处理它，但是当您了解如何使用它时-您会喜欢的！

我已经使用过display：inline-block和flex-direction：row但是它不起作用。有人可以帮我吗？

您无法将display：inline-block与flex-direction结合使用，因为您正在尝试将flex与block结合使用。您应该改用 display：inline-flex 。

HTML标记：

<ul class="d-flex">
  <li>Lorem, ipsum.</li>
  <li>Ad, quas.</li>
  <li>Recusandae, minima.</li>
  <li>Tempore, sint.</li>
  <li>Consequuntur, porro.</li>
  <li>Ipsum, at!</li>
</ul>

SCSS标记：

.d-flex {
  display: inline-flex;
}
ul {
  li {
    display: inline-flex;
    margin: 0 10px;
    padding: 2px 8px;
    border: 1px solid black;
    border-radius: 4px;
  }
}

在这里您可以尝试使用flex： https://codepen.io/dstolarski/pen/XOYEwR

HTML / CSS将所有内容都设置在同一行

2 个答案: