Question

我在应用程序顶部有一个菜单栏，有3个部分。左侧的图标，中间的图标和右侧的图标。我可以轻松地向左浮动并向各个部分浮动，但我不知道如何浮动中心部分。

我附上了期望结果的屏幕截图，以及我目前得到的内容。

问题是左侧和中间部分的图标数量会一直变化。这是我渴望的结果 Desired Outcome

VS 我的实际成果 Actual Outcome

我在我的示例中使用了相同的图标，但左边是正确的位置，退出按钮位于正确的一侧，但是向下推，中间部分全部搞砸了。

感谢您的帮助。

<body>
<div id="content">
    <div id="menuBar">
        <div id="menuBarContent">
            <div class="homeIconDiv menuBarHardIconDiv floatLeft">
                <img class="menuBarIcon" src="images/icons/home.png" />
            </div>
            <div class="backIconDiv menuBarHardIconDiv floatLeft">
                <img class="menuBarIcon" src="images/icons/home.png" />
            </div>
            <div class="menuBarSoftIconDiv">
                <img class="menuBarIcon" src="images/icons/home.png" />
            </div>
            <div class="menuBarSoftIconDiv">
                <img class="menuBarIcon" src="images/icons/home.png" />
            </div>
            <div id="logoutIconDiv" class="floatRight">
                <img class="logoutIcon" src="images/icons/logoutButton.png" />
            </div>
        </div>
    </div>
    <div id="mainContent" class="clear">
    </div>
</div>

html
{
    height:100%;
}

body
{
    height:100%;
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
}


 .MSIQtextbox { 
    border: 1px solid #67AE3D; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    outline:0; 
    height:35px; 
    width: 375px; 
    padding-left:10px; 
    padding-right:10px; 
  }

.floatLeft 
{
    float:left;
}

.floatRight 
{
    float:right;
}

.center
{
     text-align:center;
 margin:0 auto;
}

.clear
{
    clear:both;
}
#content
{
    height:100%;
}

#menuBar 
{
    position:fixed;
    top:0;
    background-color:rgba(211,211,211,0.9);  
    height:64px;
    box-shadow: 0px 2px 1px #888888;
    margin-bottom:3px;
    z-index:10000;
    width:100%;
}

#menuBarContent
{
    width:1020px;
    margin: 0 auto;
}

#mainContent 
{
    width:1020px;
    min-height:630px;
    margin-left:auto;
    margin-right:auto;
    height:100%;
    padding-top:3px;
}

.optionsDiv
{
    color:White;
}

.menuBarHardIconDiv 
{
    height:64px;
    width:64px;
    border-right:1px solid #858585;
}

#logoutIconDiv 
{
    height:64px;
}

.menuBarHardIconDiv:hover
{
 background-color:#F5F0E0;
 box-shadow: 0px 0px 0px #888888;
}

img.menuBarIcon
{
   position:relative;
   top:50%;
   left:50%;
   margin-top:-12px;
   margin-left:-12px;
}

img.logoutIcon
{
   position:relative;
   top:50%;
   margin-top:-12px;
}

Answer 1

.center {margin-left：auto;余量右：汽车;}

如何漂浮“中心”？我知道这不对，我想要导航栏的左侧，中间和右侧部分

1 个答案: