时间戳

首页 > 解决方案 > HTML / CSS 将所有内容设置在同一行

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

问题描述

我的问题是：在导航栏中插入新按钮时，用户名会转到底线。我的目标是让所有东西都对齐在同一条线上。

我已经用过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>

标签： htmlcsstwitter-bootstrap

解决方案

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

在这里，添加一个类。我选择了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;
}

您的代码中可能有一些额外的边距或填充，所以我会检查一下。

推荐阅读