0

私が直面している問題は、タグ内のテキストが 1 行で調整されていないことです。

これが私のhtmlです。

<html>
    <head>
        <link rel="stylesheet" href="style5.css" type="text/css">
    </head>

    <body>

    <div id="outer">

        <ul>
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">content</a></li>
            <li><a href="#">search</a></li>
            <li><a href="#">more</a></li>
        </ul>

        <div id="homepage">

            <a href="#">Set as Homepage</a>

        </div>

        <div id="clear">
        </div>

    </div>

    <div id="wrapper">

        <div id="pic">
            <img src="logo.png">
            <div id="content">
                <p> Secure Search </p>
            </div>
        </div>

        <div id="forms">

            <form>
                <input type="text" name="submit" size="70" style="font-size:20pt;"/>
            </form>
            <div id="pic_2">
                <img src="powerd-by-google.png">
            </div>

        </div>

        <div id="footer">
            © 2012 - <a href="#">We Respect your Privacy</a> - <a href="#">About AVG Secure Search</a>
        </div>
    </div>

    </body>


</html>

ここに私のcssがあります。

body
{
    margin: 0;
    padding: 0;
    background-color: white;
}

h1,h2,h3
{
    margin: 0;
    padding: 0;
}

p,ul,ol,li
{
    margin: 0;
    padding: 0;
}

#outer
{
    background-color: rgb(67,68,71);
}

#outer ul
{
    list-style: none;
    margin-left: 5px;
    border-left: 1px solid;
}

#outer li
{
    float: left;

}

.current
{
    background-color: rgb(56,63,137);
}

#outer a
{
    width: 90px;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    color: white;
    border-right: 1px solid;
    padding: 5px;
}

#outer a:hover
{
    color: black;
    background-color: white;
}

#outer .current a:hover
{
    color: white;
    background-color: inherit;
}

#homepage a
{
    float: right;
    font-weight: none;
    color: white;
    background-color: rgb(67,68,71);
    display: inline;
    text-transform: lowercase;
    border-right: none;
}

#homepage a:hover
{
    color: white;
    background-color: inherit;
}

#clear
{
    clear: both;
}


#wrapper 
{
    width: 960px;
    margin: 0 auto;
    overflow: auto;
}

#pic
{
    margin-top: 100px;
    margin-left: 389px;
    position: relative;
}

#content
{
    position: absolute;
    top: 60px;
    left: 90px;
}

#forms
{
    margin-top: 50px;
    position: relative;
}

#pic_2
{
    position: absolute;
    top: 0px;
    left: 867px;
}

#footer
{
    width: 500px;
    margin: 375px auto 0px;
}

#footer a
{
    text-decoration: none;
}

現在、問題はaホームページのdivのタグにあります。私は一生懸命試しましたが、テキストが1行で調整されず、複数行に忍び寄っているように見える理由がわかりません。

この問題に関する提案は本当に役に立ちます。

ありがとうございました。

4

2 に答える 2

1

「ホームページとして設定」ボタンについて話していると思います。

#outer aもしそうなら、問題はあなたのcssがその要素を広くしている継承された要素に固定を書いていること90pxです。

CSSスタイル width: inherit;を追加するだけでこれを修正できます#homepage a

例：

于 2012-09-16T09:56:21.150 に答える
0

width「ホームページとして設定」要素に追加する必要があります

#homepage a {
 .....
  width: 120px; //added width
}

ここを見てください、http://jsfiddle.net/VkmHr/

それはあなたが探しているものですか？

于 2012-09-16T09:55:21.643 に答える