0

真ん中のリスト項目を右に浮かせようとしています。したがって、青いアイテムの隣に赤いアイテムと役職が表示されます。しかし、右に浮かべると、左ではなく青いものの右に置かれます。

これが私が今持っているものです

これが私が今持っているものです

私がそれを正しく浮かべると、これが得られます。

私がそれを正しく浮かべると、これが得られます。

では、どうすれば正しく表示できますか？

私のSCSS

  .credit-list-main{
    list-style:none;
    padding:0;
    font-size:13px;

    >li.credit-list-company{
        list-style:none;

        >h3{
            font-weight:bold;
            font-size:13px;
        }

        >ul.credit-list-person{

            list-style:none;
            padding:0;
            padding-left:5px;

            >li{
                display:inline;
            }
            /*Person name*/
            >li:nth-child(1){
                background:green;
            }
            /*Job title*/
            >li:nth-child(2){
                background:red;
                float:right;
            }
            /*Person nav*/
            >li:nth-child(3){
                background:blue;
                float:right;
            }
        }
    }

}

HTML

<ul class="credit-list-main">
                        <li class="credit-list-company">
                            <h3>Management</h3>
                            <ul class="credit-list-person">
                                <li>Cevat Yerli</li>
                                <li>CEO & President</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Avni Yerli</li>
                                <li>Managing Director</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Faruk Yerli</li>
                                <li>Managing Director</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                        </li>
                        <li class="credit-list-company">
                            <h3>Programming Team</h3>
                            <ul class="credit-list-person">
                                <li>Filipe Amim</li>
                                <li>Game Programmer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Sandy Brand</li>
                                <li>Senior AI / Game Programmer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Dean Claassen</li>
                                <li>Senior Interface Programmer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Fernando Colomer</li>
                                <li>Senior Game Programmer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Sandy Brand</li>
                                <li>Senior AI / Game Programmer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                        </li>
                        <li class="credit-list-company">
                            <h3>Research & Development</h3>
                            <ul class="credit-list-person">
                                <li>Christopher Balte</li>
                                <li>Software Engineer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Iva Zoltan Frey</li>
                                <li>Lead Animation Engineer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Iva Herzeg</li>
                                <li>Lead Animation Engineer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                            <ul class="credit-list-person">
                                <li>Christopher Balte</li>
                                <li>Software Engineer</li>
                                <li><a href="#"><i class="icon-edit"></i></a></li>
                            </ul>
                        </li>
                    </ul>
4

2 に答える 2

1

次のように管理することもできます。

<ul class="credit-list-person">
<li>Cevat Yerli</li>
<span>
<li>CEO & President</li>
<li><a href="#"><i class="icon-edit"></i></a></li>
</span>
</ul>

次に与えfloat: rightてから、最初のliと2番目のliをspan適用しますfloat: leftfloat: right

アップデート

マークアップを変更せずに、このフィドルとして正しい値を設定することでこれを行うことができますが、@ zessx の回答に従って順序を変更することをお勧めします

于 2013-08-28T07:39:26.770 に答える