0

HTML/CSS で次の単純なデザイン サンプルを実装する必要がありますが、2 つのパイプを含むテキストをページの中央に配置することができないようです。左行、テキスト、右行を中央に配置し、テキストを行のほぼ中央に配置

私が現在持っているCSSコードは次のとおりです。

#nav {
float: right;
font-family: "Trebuchet MS","Lucida Grande","Lucida Sans",Verdana,Arial,sans-serif;
font-size: 6.5em;
margin: 0px 0 10px;
/****************IE6****************/
padding-top: 0em;
}
#nav ul {
    padding: 0 0 0 20px;
    position: relative;
}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    margin: 0;
    padding: 0;
}
ul, ol {
    list-style: none outside none;
}
#nav ul li {
    float: left;
    margin: 0 0 0 20px;
    position: relative;
    padding-right: 20px;
    background:url(pipe.png) no-repeat 100% 50%;
}
#nav ul li:last-child
{
    background: none;
}
#nav li  {
    color: #666666;
    text-decoration: none;
    padding-right: 5px;
}


/*End hide*/
/*Mac IE 5*/
* html #nav li:first-child { border-left: 0; }

そして、これは私のHTMLです

<div id="nav">
    <ul>
        <li>
            &nbsp;
        </li>
        <li> 
            LYNXX
        </li>
        <li>
        &nbsp;
        </li>
    </ul>
</div>

私は次のことを試しました：

  1. 外側の div を追加してその中心を揃えても、内側の div には何も影響しませんでした
  2. 代わりに 3 つの div を使用してすべて左にフローティングしようとしましたが、「パイプ」/行の中央にテキストを配置することはできませんでした

もっとたくさんのことを試しましたが、すでに 5 時間を費やした後では、何をしたか、何をしなかったかを思い出せません。

これは IE 7、8、9 および他のすべての最新ブラウザに対応している必要があります。

誰かがこれで私を助けることができれば、私は非常に感謝しています.

ありがとうアニナ

4

2 に答える 2

0

HTML：

<ul>
 <li><span>Text goes here</span></li>
</ul>

CSS：

ul {
 list-style-type: none;
}
ul li {
 background: #000;
 text-align: center;
 float: left;
 padding: 30px 100px;
}
ul li span {
 display: block;
 float: left;
 margin: 0 auto;
 padding: 10px 50px;
 border-width: 0 1px;
 border-style: solid;
 border-color: #fff;
 text-align: center;
 color: #fff;
}

http://jsfiddle.net/MKf4B/

これは単純な実装です

于 2012-05-03T16:44:14.533 に答える
0

なぜパイプを保持するためにliを使用しているのですか？

こっちの方が似合うかも

<div class="container">
    <div class="text">
        Text goes here
    </div>
</div>

これらのスタイルで

    .container {
        width: 500px;
        margin: auto;
    }

    .text {
        width: 250px;
        margin: auto;
    }

    .text:before {
        content: "|";
    }

    .text:after {
        content: "|";
    }

それが本当に必要な場合は、li でこれを使用する方法を理解していると思います。

于 2012-05-03T16:58:54.717 に答える