0

我必须在 HTML/CSS 中实现以下看起来很简单的设计示例，但我似乎无法让带有两个管道的文本在页面上居中对齐。左行、文本和右行位于居中位置，文本几乎位于行的中间

这是我目前拥有的 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. 我尝试使用三个 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's 来握管子？

我认为这可能更合适

<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 回答