相关疑难解决方法(0)

我正在尝试使用动态元素构建导航,这些元素可能会在小屏幕尺寸上分成两行,并且我希望能够在每一行上设置第一个和最后一个元素的样式.

下面是一些示例scss在小屏幕尺寸上打破(圆角应该在每行的第一个和最后一个元素上):

<ul>
    <li>First page</li>
    <li>Second page</li>
    <li>Third page</li>
    <li>Fourth page</li>
    <li>Another example page</li>
    <li>This could be the last page</li>
    <li>But its not</li>
    <li>This is actually the last page</li> 
</ul>

ul {
    list-style:none;
    font-size:0px;
    li {
        font-size:18px;
        display:inline-block;
        padding:10px 30px;
        border:1px solid black;
        margin:10px -1px 10px 0;
        &:first-child {
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
        }
        &:last-child {
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
        }
    }        
}

与相关的jsfiddle:http://jsfiddle.net/tbw4f23g/1/

是否有可能获得第一个和最后一个内联块元素的选择器,该元素在新行上运行,或者是否有其他(非javascript)方法用于此效果？