使中的文字居中

原創

2020-02-21 03:09

項目中要用到<select>下拉菜單，但是顯示的文字不能居中……不能居中實在太醜了吧……查過<select>根本沒有能讓文字居中的屬性。最後只能自己模擬一個，廢話不說直接上代碼。

這裏的下拉菜單是用來選擇月份的，一共有三個月，默認爲當前月份。在菜單裏，如果選擇了的，就填到<span>裏去，然後在菜單裏隱藏這一項，顯示其他兩項。

    <style>

        .ui-select {
            margin-top: 5%;
            text-align: center;
        }
        .ui-select select {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 3em;
            opacity: 0;
        }

    </style>

<!--外層是boostrap。下拉框菜單 -->
    <div class="row-fluid">
        <div class="span12">
            <div class="ui-select">
            <ul  class="unstyled list-group">
                <li class="list-group-item" style="background-color: #59ABED;color: #ffffff">

                    <span id="last00" style="background-color: #59ABED;color: #ffffff"></span>
                    <select id="select">
                        <option id="last0" value="last0"></option>
                        <option id="last1" value="last1"></option>
                        <option id="last2" value="last2"></option>
                    </select>
                </li>
            </ul>
            </div>
        </div>
    </div>

//選擇菜單的處理方法：點擊誰<span>就是誰的值；點擊誰誰就隱藏，其他顯示
    $("#select").change(function(){
        var select=$("#select").val();
        switch(select)
        {
            case "last0":
                var last0= $("#last0").text();
                $("#last00").text(last0+" "+"▼");
                $("#last0").hide();
                $("#last1").show();
                $("#last2").show();
                $("#body").empty();
                attendance_check.getdatelast0_sign();
                break;
            case "last1":
                var last1= $("#last1").text();
                $("#last00").text(last1+" "+"▼");
                $("#last1").hide();
                $("#last0").show();
                $("#last2").show();
                $("#body").empty();
                attendance_check.getdatelast1_sign();
                break;
            case "last2":
                var last2= $("#last2").text();
                $("#last00").text(last2+" "+"▼");
                $("#last2").hide();
                $("#last0").show();
                $("#last1").show();
                $("#body").empty();
                attendance_check.getdatelast2_sign();
                break;
        }
    })

最後的結果是：