Question

好的，我有我的网页（http://jsfiddle.net/HVGBf/），但它不按照我希望的方式工作。

正如您在小型浏览器上看到的那样，Logos文本由于行高而向下跳跃。如果可能的话，我希望项目名称能够并排，否则我希望它能在彼此之间，但我怎样才能实现呢？

HTML：

<body class="home">    
    <div id="wrapper">

        <div id="logo">
            <span>Project name</span>
        </div><!-- endLogo -->

        <div id="menu">
            <ul>
                <li><a href="">Home</a></li> 
                <li><a href="">Over ons</a></li> 
                <li><a href="">Projecten</a></li> 
                <li><a href="">Vrienden</a></li> 
                <li><a href="">Doneren</a></li> 
                <li><a href="">Contact</a></li> 
            </ul>
        </div><!-- endMenu -->

    </div>
</body>
</html>

的CSS：

 /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html, body { font-family: "helvetica", arial; margin: 0; padding: 0; height:100%;}

#wrapper {
    min-width: 800px;
}

.home #logo { 
    background: #00B65F; 
    width: 22%;
    float: left;
    padding: 0 1% 0 2%; 
    text-align: right;
    -webkit-border-top-right-radius: 15px; 
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px; 

    line-height: 180px;
    height: 180px;
    font-size: 220%;
}
.home #logo span {
    font-color: #000;
}
.home #menu {
    background-color: #000; 
    float: right; 
    background-repeat: repeat; 
    padding: 56px 5% 56px 1%; 
    -webkit-border-top-left-radius: 15px ;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px; 
    margin-left: 6%;
    width: 63%;
    height: 70px;
}


#menu ul { 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 100%;

}
#menu li { 
    float: left; 
    list-style-type: none;  
}
#menu a { 
    float: left;
    text-decoration: none; 

    font-size: 150%;
    color: #fff; 
    padding: 0.4em 0.7em 0.4em 0.7em;
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    display: block;
}

#menu a:hover, #menu .active { background-color: #00B65F; }

Answer 1

如果您只想将“项目”和“名称”这两个字放在一行上，那么这应该可以解决问题：

#logo span { white-space: nowrap; }

由于你的大小（按百分比），文字可能会延伸到#logo之外，所以为了解决这个问题你还可以添加一个最小宽度：

#logo { min-width: 200px; }

修改：我注意到您margin-left设置为6%。我建议使用像20px这样的常量值。另外，这里有一个jsFiddle，其中包含我提到过的建议。

我的CSS布局不按预期方式工作

1 个答案: