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

Question

我的问题是:当在navbar中插入一个新按钮时，用户名会到达底线。我的目标是让每件事都在同一条线上。

我已经使用了display: inline-block和flex-direction: row，但是没有起作用。有人能帮我吗？

​

​

 <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

请考虑从浮动到柔性盒或网格来设置元素的位置！*我们现在的CSS中有“杀手特性”，比如flexbox或更好的CSS grid (但有些浏览器支持不足)。是的，刚开始的时候很难处理，但是当你知道如何使用它的时候，你会喜欢它的！

我已经使用了显示:内联块和弯曲方向:行，但它没有工作。有人能帮我吗？

你不能组合显示:内嵌块和弯曲方向，因为你试图将flex和块结合起来。您应该使用display:内联-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