0

さて、私のWebページ（http://jsfiddle.net/HVGBf/）がありますが、希望どおりに機能していません。

小さなブラウザで見られるように、行の高さのためにロゴのテキストがジャンプダウンしています。可能であればプロジェクト名を並べてほしい。そうでない場合は、プロジェクト名を相互に並べてほしいのですが、どうすればそれを実現できますか？

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; }
​
4

1 に答える 1

0

"Project" と "Name" という単語を 1 行にまとめたい場合は、次のようにします。

#logo span { white-space: nowrap; }

テキストのサイズ設定 (パーセンテージ) が原因で、テキストが外側に広がる可能性がある#logoため、修正するには、次のように最小幅を追加することもできます。

#logo { min-width: 200px; }

編集：あなたもにmargin-left設定していることに気付きました6%。のような定数値を使用することをお勧めします20px。また、ここに、私が言及した推奨事項を含む jsFiddleがあります。

于 2012-07-14T23:21:53.860 に答える