html - 如何居中 Angular 色 |在元素之前

Question

我最近遇到了一些拒绝样式化的元素的问题。

这是我想要实现的目标:

这是我现在拥有的:

我曾尝试应用各种样式元素，如 vertical-align: middle、一些 padding 或一些 margin 但没有取得太大成功。

我的猜测是它被它的容器阻塞了，不能比容器“更高”。

我想保留这个解决方案(前元素中的 |)，同时让它们居中。

这可能吗？

到目前为止，这是我的 css/html:

CSS:

/**********Header**********/
#head-wrapper{
    max-width: 1024px;
    margin: 0 auto;
    font-size: 14px;
}

.menu_align{
    padding-top: 8px;
    float: right;
}

nav a + a:before{
    content: " | ";
    color: rgb(102, 102, 102); /*needed in order to prevent color triggering from hover property of a*/
    padding: 0 10px 0 10px;
}

HTML:

    <header>
        <div id="head-wrapper">
            <img src="<?php echo base_url();?>Images/logo.png" alt="Logo">
            <nav class="menu_align">
                <a href="#">INSIGHT</a>
                <a href="#">BUILDINGS</a>
                <a href="#">CLIENTS</a>
            </nav>
        </div>
    </header>

Answer 1

不要使用伪元素和管道字符来拆分导航项。为 anchor 添加边框，然后为 first-child 移除边框:

nav a{
    border-left:1px solid #000;
    color: rgb(102, 102, 102);
    padding: 0 10px 0 10px;
}
nav a:first-child{
    border-left:0;
}

JSFiddle

---

以上是最广泛支持的选项，但还有其他选项只能在较新的 (IE9+) 浏览器中使用:

nav a:not(:first-child){
    border-left:1px solid #000;
    color: rgb(102, 102, 102);
    padding: 0 10px 0 10px;
}

JSFiddle