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>
    <li><a href="#"><i class="icon-edit"></i></a></li>
    <li>CEO & President</li>
</ul>
于 2013-08-28T07:36:31.900 回答
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和span之后 然后申请float: left第一个 li 和float: right第二个 li

更新

在不更改标记的情况下，您可以通过将正确的值设置为这个小提琴来做到这一点，但更好的是改变它的顺序，正如@zessx 回答的那样

于 2013-08-28T07:39:26.770 回答