导航栏未对齐答案

【问题标题】：Navbar not aligning导航栏未对齐
【发布时间】：2014-08-04 04:44:25
【问题描述】：

我真的需要关于在固定标题中对齐导航栏的帮助我希望导航栏上方的文本位于 menuTop 中导航栏的左侧，而导航栏位于 menuTop 中的最右侧

HTML：

<div class="myMenuTop">
    <span class="myFont1">Company&trade;</span>
    <ul id="navmenu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li>
            <a href="#">3</a><span class="darrow">????</span>
            <ul class="sub1">
                <li><a href="#">3.1</a></li>
                <li><a href="#">3.2</a></li>
                <li><a href="#">3.3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">4</a><span class="darrow">????</span>
            <ul class="sub1">
                <li><a href="#">4.1</a></li>
                <li><a href="#">4.2</a></li>
                <li>
                    <a href="#">4.3</a><span class="rarrow">????</span>
                    <ul class="sub2">
                        <li><a href="#">4.3.1</a></li>
                        <li><a href="#">4.3.2</a></li>
                        <li><a href="#">4.3.3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">5</a></li>
    </ul>
</div>

CSS：

.myMenuTop {
    height:40px;
    width:100%;
    min-width:536px;
    background-color:#000;
    position:fixed
}

.myLogo {
    height:300px;
    width:100%;
    min-width:536px;
    border-bottom:1px solid #000;
    border-top:1px solid #000;
    align:center;
    text-align:center
}

* {
    margin:0;
    padding:0
}

.img1 {
    height:211px;
    width:550px;
    min-width:500px
}

/* RULES FOR NAVIGATION MENU*/
/* ================================================ */
ul#navmenu,ul.sub1,ul.sub2 {
    list-style-type:none;
    font-size:9pt
}

ul#navmenu li {
    width:100px;
    position:relative;
    text-align:center;
    float:left;
    margin-right:4px
}

ul#navmenu a {
    text-decoration:none;
    display:block;
    width:100px;
    height:25px;
    line-height:25px;
    background-color:red;
    border:1px solid #CCC;
    border-radius:5px
}

ul#navmenu .sub1 a {
    margin-top:5px
}

ul#navmenu .sub2 a {
    margin-left:10px
}

ul#navmenu li:hover > a {
    background-color:grey
}

ul#navmenu li:hover a:hover {
    background-color:#FA07AD
}

ul#navmenu ul.sub1 {
    display:none;
    position:absolute;
    top:26px;
    left:0
}

ul#navmenu ul.sub2 {
    display:none;
    position:absolute;
    top:0;
    left:101px
}

ul#navmenu li:hover .sub1 {
    display:block
}

ul#navmenu .sub1 li:hover .sub2 {
    display:block
}

.darrow {
    position:absolute;
    top:5px;
    right:4px;
    font-size:11pt
}

.rarrow {
    position:absolute;
    top:6px;
    right:4px;
    font-size:13pt
}

【问题讨论】：

标签： html css alignment navbar

【解决方案1】：

您只需要将浮动元素设置为左对齐内容和右对齐内容。

.myFont1{
    float: left;
    margin-top: 20px;
}

#navmenu{
    float: right;
    margin-top: 5px;
}

【讨论】：

【解决方案2】：

实际上，您只需要一个应用于 .mylogo 的 float: left 和一个应用于 #navmenu 的 float: right 即可完全按照您的要求完成。

.mylogo {
    float: left;
}

#navmenu {
    float: right;
}

【讨论】：

如何让文本公司与导航栏位于同一行？

【解决方案3】：

我已更改，请检查并恢复，请将结果窗口扩大一点，以便两者都可以容纳在栏中。

Changed some css 

myMenuTop -> float:left; display:inline block;

navmenu  -> float:right

Fiddle

【讨论】：