Question

正如标题所说，我试图将CSS三角形/箭头垂直居中到div的右侧，当然，我希望使用纯CSS解决方案来实现这一点。

我会包含图片，但由于我的低代表，我不能。

注意：我当前的代码无法正常工作，并且不能跨浏览器兼容（例如，Chrome将箭头置于右上方〜但在Firefox上，它会被挤压到界限之外）

我的代码

HTML ：

<div class="main-panel">
    <nav class="left-panel">
        <ul class="page-nav">
            <li class="page-tab active"><a class="page-nav-link">Dashboard</a></li>
            <li class="page-tab"><a class="page-nav-link">Page 1</a></li>
            <li class="page-tab"><a class="page-nav-link">Page 2</a></li>
            <li class="page-tab"><a class="page-nav-link">Page 3</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long abc</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long abcdef</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long abcdefghi</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long abcdefghijkl</a></li>
            <li class="page-tab"><a class="page-nav-link">Very long element abcdefghijklmno</a></li>
        </ul>
    </nav>
    <div class="right-panel">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque nisl vitae nulla dignissim, at rutrum nunc interdum. Mauris et facilisis orci. Phasellus ac libero id nisl malesuada ultricies. Aenean vitae cursus velit. Nulla sit amet leo eu enim scelerisque volutpat. Vivamus gravida felis et pulvinar mollis. Sed bibendum consectetur nisi, sit amet tincidunt enim interdum a. Duis sed gravida felis. Fusce mauris est, bibendum a neque et, fringilla placerat magna. Vestibulum pellentesque massa quis bibendum dapibus. Praesent pharetra ipsum id libero dapibus rutrum. Quisque accumsan dictum lacinia.
            Mauris ut mi nec orci accumsan consequat. Donec blandit augue eget nulla fermentum, quis porttitor lacus feugiat. Proin vehicula dolor id lorem egestas elementum. Nullam vitae rutrum tortor. Proin varius adipiscing nibh. Vivamus ultrices nibh nec varius bibendum. Integer quis nisi sed metus adipiscing sagittis. Curabitur congue, nisi nec pretium suscipit, mi leo posuere dui, pellentesque dapibus ligula urna a ligula. Quisque mauris nisl, interdum eu est in, elementum cursus arcu. Sed suscipit vel erat vitae viverra. Mauris neque ipsum, bibendum eget hendrerit ac, vulputate in eros. Ut tincidunt, urna ac auctor porttitor, mauris purus varius erat, ut pellentesque urna turpis non nibh. Aenean sed neque a velit tristique tristique.
            Praesent id cursus libero. Vestibulum pulvinar feugiat neque pretium suscipit. Nam vitae magna eget elit aliquam accumsan. Duis et eleifend enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nunc est, commodo quis pretium vitae, lacinia ac lectus. Cras mi tellus, suscipit non leo eget, auctor feugiat mauris. Praesent vitae vehicula ipsum, nec ultrices arcu. Proin mollis leo sit amet erat scelerisque feugiat. Nullam eget varius ante. Praesent a laoreet libero.
            Suspendisse ut eros et odio rhoncus malesuada. Integer laoreet, leo at fringilla volutpat, augue lorem tincidunt augue, sit amet feugiat erat neque in est. Phasellus imperdiet, nisi vel faucibus auctor, sapien orci mollis est, tincidunt vehicula nisi nunc sit amet purus. Sed cursus ipsum nisi, id elementum leo feugiat in. Phasellus vitae arcu ac ligula pellentesque malesuada. Maecenas vulputate nunc et consequat pellentesque. Nulla semper quam a orci eleifend, vel gravida est euismod. Nam fermentum, nisi ullamcorper congue convallis, turpis purus lacinia ligula, ac posuere urna est non felis. Cras lobortis ligula neque, vel fermentum magna facilisis sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Quisque a quam nec sem vestibulum dapibus quis non lacus. Integer eget ligula eu turpis pretium iaculis. Cras gravida ligula in mauris bibendum placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ac tristique risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque diam nisi, sodales vel nisi a, sollicitudin commodo ipsum. Fusce elementum nisi ac semper dignissim. Etiam nec felis dapibus lacus faucibus vehicula eget eu odio. Sed id risus tellus. Curabitur in luctus orci.
        </p>
    </div>
</div>

CSS ：

* {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue",Helvetica,sans-serif;
    line-height: 20px;
}

.main-panel {
    min-width: 700px;
    width: 100%;
    min-height: 500px;
    max-height: 700px;
    display: -webkit-flex;
    display: flex;
    background: rgba(64, 64, 64, 0.4);
}

.left-panel {
    border-width: 2px 0 0 0 0;
    background: rgba(245, 245, 245, 0.4); /* fallback color if gradients are not supported */
    background: -webkit-linear-gradient(top, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /* For Chrome and Safari */
    background:    -moz-linear-gradient(top, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /*     For old Fx (3.6 to 15) */
    background:     -ms-linear-gradient(top, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /* For pre-releases of IE 10*/
    background:      -o-linear-gradient(top, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /* For old Opera (11.1 to 12.0) */ 
    background:         linear-gradient(to center bottom, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /* Standard syntax; must be last */
    box-shadow:         0px 0px 7px white inset;
    -moz-box-shadow:    0px 0px 7px white inset;
    -webkit-box-shadow: 0px 0px 7px white inset;

    overflow: hidden;
    min-width: 180px;
    max-width: 280px;
    padding: 5px 0 5px 7px;
}

.right-panel {
    background-color: white;
    overflow: hidden;
    padding: 5px 5px 5px 5px;
    -webkit-flex: 1;
    flex: 1;
    flex-basis: auto;
}

.left-panel > .page-nav > .page-tab {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: solid 1px rgba(245, 245, 245, 0.4);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3) inset;
    border-top-width: 1px;
    border-right-width: 0;
    padding: 0 5px;
    margin-bottom: 0px;
    cursor: pointer;
    height: 25px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
    list-style: none;
    text-align: center;
}

.left-panel > .page-nav > .page-tab.active {
    box-shadow: 2px 2px 2px rgba(245, 245, 245, 0.6) inset;
    background: rgba(245, 245, 245, 0.4); /* fallback color if gradients are not supported */
    background: -webkit-linear-gradient(top, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /* For Chrome and Safari */
    background:    -moz-linear-gradient(top, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /*   For old Fx (3.6 to 15) */
    background:     -ms-linear-gradient(top, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /* For pre-releases of IE 10*/
    background:      -o-linear-gradient(top, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /* For old Opera (11.1 to 12.0) */ 
    background:         linear-gradient(to center bottom, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /* Standard syntax; must be last */
}

.left-panel > .page-nav > .page-tab.active:after {
    content: " ";
    height: 0;
    width: 0;

    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 
    border-right: 7px solid white;
    margin-right: -5px;
    display: inline-block;
    float: right;
}

.left-panel > .page-nav > .page-tab:hover {
    box-shadow: 2px 2px 2px rgba(245, 245, 245, 0.6) inset;
}

JSFiddle链接：http://jsfiddle.net/LvG2C/

Answer 1

试试这样：

.left-panel > .page-nav > .page-tab {
    position: relative;
}

.left-panel > .page-nav > .page-tab.active:after {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 7px 7px 7px 0;
    border-color: transparent #ffffff transparent transparent;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -7px;
    content: "";
}

高度三角形14px，用于垂直对齐：14/2 = 7，对于此边距 - 顶部：-7px;

Example

顺便说一下，generator triangles

Answer 2

将浮动保持在运行中的替代解决方案 使用line-height值+ font-size设置箭头和边距的大小。 http://jsfiddle.net/LvG2C/3/

编辑：如果您将 <a> 作为一个内联块，则与文本省略号不兼容。

你使用浮动。它与vertical-align不兼容。

您可以将内嵌框和箭头设置为相互垂直对齐。给a的宽度一直推箭头： http://jsfiddle.net/LvG2C/1/

.left-panel > .page-nav > .page-tab.active:after {
    content:" ";
    height: 0;
    width: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid white;
    vertical-align:middle;
    display: inline-block;
}
.left-panel > .page-nav > .page-tab:hover {
    box-shadow: 2px 2px 2px rgba(245, 245, 245, 0.6) inset;
}
a {
    display:inline-block;
    width:100%;
    vertical-align:middle;
    margin-right:-3px;
}

Answer 3

另一种方法是在您希望左侧有一个箭头垂直居中的元素上设置一个类。在课堂上看起来像：

.left-arrow {
    background: url('/images/arrow.png') 0% 50% no-repeat;
    padding-left: 20px; // Number of pixels you need to offset the content to make the content come after the arrow the way you want it to.
}

这意味着具有class =“left-arrow”属性的任何元素都会在左侧垂直居中。然后导航代码看起来像：

<nav class="left-panel">
    <ul class="page-nav">
        <li class="page-tab active"><a class="page-nav-link">Dashboard</a></li>
        <li class="page-tab"><a class="page-nav-link">Page 1</a></li>
        <li class="page-tab"><a class="page-nav-link">Page 2</a></li>
        <li class="page-tab"><a class="page-nav-link">Page 3</a></li>
        <li class="page-tab"><a class="page-nav-link left-arrow">Somewhat long</a></li>
        <li class="page-tab"><a class="page-nav-link">Somewhat long abc</a></li>
        <li class="page-tab"><a class="page-nav-link">Somewhat long abcdef</a></li>
        <li class="page-tab"><a class="page-nav-link">Somewhat long abcdefghi</a></li>
        <li class="page-tab"><a class="page-nav-link">Somewhat long abcdefghijkl</a></li>
        <li class="page-tab"><a class="page-nav-link">Very long element abcdefghijklmno</a></li>
    </ul>
</nav>

Answer 4

很好地使用CSS3。如果您的客户对您使用cSS3没问题，那么您的方法就足够了（如果它不是最好的选择）。但是，我为需要使用旧版浏览器的客户工作，事实上我的工作仍然主动使用IE7 / 8。

这是我用于简单箭头样式解决方案的方法。它简单，强大，并且与IE5 +兼容。此外，这种方法可以在移动设备和平板电脑浏览器上很好地工作。（了解您的客户/客户需求，并决定是否要依赖此方法）。

在photoshop中创建箭头并将其另存为.png。该文件应该只有50字节或一些非常小的东西。（5px X 10px）。
在photoshop中创建渐变。它应该是（1px宽），高度应该恰好是li元素的两倍。在图像上创建正常/悬停状态。所以前y个像素应该是正常渐变，下一个y像素应该悬停在渐变上。我们将使用css来改变背景的位置。没有理由创建2个渐变图像。
部署CSS2。

li { background：url（gradient.png）repeat-x; 身高：30px; 线高：30px; text-align：center; 颜色：＃000; font-size：14px; } li：悬停{ background-position：0 -30px; } li a { background：url（arrow.png）no-repeat 100％center; }

这应该让你开始。并向您展示另一种方法。

CSS箭头垂直居中于div的右侧

4 个答案:

SO正在窃听，无法获取代码块的代码格式化