Question

我正试图将中间列表项向右浮动。所以带有职位的红色项目应该在蓝色项目旁边。但是当我向右漂浮它时，它将它放在蓝色的那个而不是左边。

所以这就是我现在所拥有的

So this is what I have now

当我向右漂浮时，我得到了这个。

When I float it right I get this.

那么我现在该如何正确显示呢？

我的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>

Answer 1

只需还原最后两列：

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

Answer 2

你也可以像这样管理：

<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提交给span，然后将float: left用于第一个li，float: right用于第二个li

<强>更新

在不更改标记的情况下，您可以通过将正确值设置为this fiddle来实现此目的，但更好的方法是更改其顺序，如@zessx所述

浮动中间列表项目

2 个答案: