CSS divs不显示内联

Question

我有一个HTML页面如下：

<div id="header-wrapper">
  <header class="header" id="header" role="banner">

    <div class="logo-slogan-wrapper">
        <a href="/d7/" title="Home" rel="home" class="header__logo" id="logo">
            <img src="http://localhost/d7/sites/all/themes/zensub/logo.png" alt="Home" class="header__logo-image" />
        </a>
        <div class="header__name-and-slogan" id="name-and-slogan">
            <h1 class="header__site-name" id="site-name">
                <a href="/d7/" title="Home" class="header__site-link" rel="home"><span>D7</span></a>
            </h1>
         </div>
     </div>    
     <div class="header__region region region-header">
        <div id="block-menu-block-1" class="block block-menu-block first last odd" role="navigation">
            <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
                <ul class="menu">
                    <li class="menu__item is-active is-leaf first leaf active menu-mlid-218"><a href="/d7/" class="menu__link active">Home</a></li>
                    <li class="menu__item is-leaf leaf menu-mlid-315"><a href="/d7/?q=about-us" class="menu__link">About</a></li>
                    <li class="menu__item is-leaf leaf menu-mlid-316"><a href="/d7/?q=contact-us" class="menu__link">Contact</a></li>
                    <li class="menu__item is-leaf last leaf menu-mlid-317"><a href="/d7/?q=prestashop-news" class="menu__link">Prestashop News</a></li>
                </ul>
           </div>
        </div>
  </div>

  </header>
</div>

我的CSS是：

#header-wrapper{
    background:#F7F7F7;
    width:100%;
}
#header{
    width:1150px;
    margin:0 auto;
}
.logo-slogan-wrapper
{
    display:inline;
    background:#555;

}
.header__region
{
    display:inline;
    background:#99CC33;
}

#logo,#name-and-slogan,#site-name,#site-slogan
{
    display:inline;
}

.menu-block-wrapper{
    float:left;
    padding:10px 0;
}
.menu li{
    display:inline;
    list-style:none;
    margin-left:10px;

我期待name，slogan和menu内嵌。但相反，menu并非内联，background:#99CC33; div的{​​{1}}未更改为所需的背景颜色！我如何克服这些问题？

Answer 1

取决于你的目标：

.header__region {
    float:left;
    // or right
}

或

.header__region {
    display: inline-block;
}