文字與箭頭對齊的多種實現方式

時間 2019-12-11
標籤文字箭頭對齊多種實現方式简体版
原文原文鏈接
直接上代碼:html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: ".";
            visibility: hidden;
            display: block;
            height: 0;
            clear: both;
        }
        
        .fl {
            float: left;
        }

        .black {
            width: 100%;
            height: 26px;
            background-color: rgb(51, 51, 51);
        }

        .grey {
            width: 100%;
            height: 38px;
            background-color: #f8f8f8;
            border-bottom: 1px solid grey;
        }

        .arrow1 {
            width: 0;
            height: 0;
            border-width: 4px;
            border-color: #999 transparent transparent transparent;
            border-style: solid;
            border-bottom: none;
            font-size: 0; /* 必須設置 */
            display: inline-block;
            /*
             自己是inline元素，那麼對齊的是文本的中線
             設置爲inline-block，那麼對齊的就是文本的基線，而基線是英文字母x的下端沿。
             設置爲inline-block, 能夠使用margin-top和margin-bottom了。
            */

            /*
             vertical-align適用於inline和inline-block和table-cell元素
            */
            vertical-align: middle;
        }

        .outer1 {
            width: 50px;
            height: 26px;
            padding: 0 13px 0 20px;
            font-size: 12px;
            text-align: left;
            line-height: 26px;
            /* 
             line-height: 100%;是針對12px;
             line-height: 1.5;也是針對12px;
             line-height: 26px; 文字居中了;
             line-height: 1.5em; 也是相對於12px;
            */
        }

        .a {
            color: #fff;
            text-decoration: none;
        }

        .outer2 {
            height: 39px;
            line-height: 39px;
            padding: 0 14px;
            position: relative;
        }

        .outer2 a {
            color: #666;
            font-size: 12px;
            float: left; /*爲何這裏必定要浮動呢？若是不浮動的畫，就要爲outer2設置寬度將em包括進去, 可是我仍是不知道*/
        }

        .arrow2 {
            height: 39px;
            float: left;  /* 必定要浮動 */
            position: relative;
            margin: 0 0 0 4px;
            width: 6px;
            cursor: pointer;
        }


        /*採用的絕對定位*/
        .arrow2 span {
            position: absolute;
            top: 18px;
            height: 0;
            width: 0;
            border-width: 3px;
            border-color: #404040 transparent transparent transparent;
            border-style: solid;
        }

        .jd {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: #e3e4e5;
            font-size: 12px;
        }

        .outer3 {
            height: 28px;
            line-height: 28px;
            padding-left: 7px;
            padding-right: 20px;
            position: relative;
        }
        .outer3 a {
            color: #999;
        }

        .arrow3 {
            position: absolute; /*採用絕對定位*/
            right: 5px;
            top: 13px;
            height: 0;
            width: 0;
            border-width: 3px;
            border-color: #404040 transparent transparent transparent;
            border-style: solid;
            font-size: 0;
        }

        



    </style>
</head>
<body>
    <div class="black clearfix">
        <div class="outer1 fl">
            <a class="a" href="#">
                惟品會
                <em class="arrow1"></em>
            </a>
        </div>
    </div>


    <div class="grey clearfix">
        <div class="outer2 fl">
            <a class="a" href="#">淘寶</a>
            <em class="arrow2">
                <span></span>
            </em>
        </div>
    </div>

    <div class="jd clearfix">
        <div class="outer3 fl">
            <a class="a" href="#">個人京東</a>
            <em class="arrow3"></em>
        </div>
    </div>

</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。