Question

我需要将我的菜单项（汽车，房屋，街道，船）放在与我的徽标相同的高度（桌面尺寸）以及其他一切与当前（包括移动切换菜单行为）相同的位置。 / p>

这有可能实现吗？

/* CSS used here will be applied after bootstrap.css */

/***** Menu *****/
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:focus,.navbar-default .navbar-nav > .active > a:hover {
    color: #fff;
}

.menu-container {
    background-color: #fff;
    border-bottom: 1px solid #000;
    min-height: 20px;
    position: relative;
}

.navbar-nav a:hover {
    color: #000;
}

.navbar-nav a:link {
    font-size: 12px;
    font-family: 'century schoolbook';
    color: #000;
    text-decoration: overline;
    text-decoration-color: #A10000;
}

.brand-name a {
    text-decoration: none;
}

.brand-name img {
    max-width: 137px;
    padding: 8px;
/*position:absolute;*/
    left: 0;
}

ul {
    list-style-type: none;
}

.navbar-form input,.form-inline input {
    width: auto;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

#sidebar.affix-top {
    position: static;
}

#sidebar.affix {
    position: fixed;
    top: 80px;
}

.navbar-default .navbar-nav > li > a {
    color: #000;
    font-family: 'LuzSans-Book';
    font-size: 14px;
}

.navbar-default .navbar-nav > li > a:hover {
    background-color: #A10000;
    color: #000;
	margin-top:4px;
	margin-bottom:4px;
}

.navbar-default .navbar-nav > .active > a {
    background-color: #000;
	margin-top:4px;
	margin-bottom:4px;
}

.navbar-custom-social {
    height: 15px;
    float: right;
    clear: none;
    margin-right: 25px;
}

.navbar-fixed-top {
    padding-top: 0;
}

.navbar-default .navbar-brand {
    color: #777;
    padding: 0;
    height: inherit;
    float: none;
    display: inline-block;
}

.navbar {
    margin-bottom: 0;
}

.navbar-nav {
    margin: 0;
}

.navbar-default {
    background-color: transparent;
    border: 0;
}

.navbar-collapse.collapse.in {
    width: 100%;
}

p.ajaxSearch_intro {
    margin: 0;
}

.navbar-default .navbar-collapse,.navbar-default .navbar-form {
    padding: 0;
}

/*toggle btn */
.navbar-default .navbar-toggle {
    border: 1px solid #000;
    border-radius: 0;
    padding: 5px 10px;
    color: #000;
    background-color: #A10000;
}

#nav.affix .logo_wrap {
    display: none;
}

#nav.affix-top .logo_wrap {
    display: block;
    background-image: url(/assets/images/header-background.png);
    background-color: #fff;
}

#nav.affix .logo_wrap-text {
    display: none;
}

#nav.affix-top .logo_wrap-text {
    display: block;
    background-image: url(/assets/images/header-background.png);
    background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<header id="nav">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar navbar-default navbar-static">
                       
                        <div class="clearfix container navbar-fixed-top">
                            <div class="clearfix menu-container">
                                <div class="pull-right clearfix toggle_btn_wrap">
                                    <a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
                                </div>
                                <div class="pull-left brand-name">
                                    <a href="#"><img alt="***brandlogo***" src="assets/images/logo.png"></a>
                                </div>
                              <div class="clearfix prevent-float"></div>
                                <div class="navbar-collapse collapse">
                                   <ul class="navbar-nav nav">
                                  <li>
                                    <a href="/car" title="car">car</a>
                                     </li>
                                     <li>
                                    <a href="/house" title="house">house</a>
                                     </li>
                                     <li>
                                    <a href="/street" title="street">street</a>
                                     </li>
                                     <li>
                                    <a href="/boat" title="boat">boat</a>
                                     </li>
		</ul>
                                </div>
                            </div>
                        </div>
                    </div></div></div>

</div></header>

Answer 1

您需要在包含徽标和菜单项的两个div上使用display:inline-block;，然后将菜单项div浮动到右侧。

Answer 2

必要的必要变化是：

1。）确保func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { // Register for push notifications let notificationSettings = UIUserNotificationSettings(forTypes: UIUserNotificationType.Alert, categories: nil) application.registerUserNotificationSettings(notificationSettings) application.registerForRemoteNotifications() return true } func application(application: UIApplication, didReceiveRemoteNotification userInfo: [NSObject : AnyObject]) { }的CSS规则包含.navbar-nav

2。）从DIV float:right中删除这两个类。

现在这两个元素可以彼此相邻。它们还没有，但这是由于各种填充和/或边距设置，您还必须调整。

如何浮动右侧菜单标题

2 个答案: