-2

私はこのような画像を作りたいと思っています。 see image ul最初と最後の画面を埋めるために

ダイナミックな値段なので、画像上にあるようにはありません。私はulを中心にして、最初と最後の李が画面全体を埋めるようにします。また、ブラウザの互換性のためにフレックスやフレックスボックスを使用することはできません

アイデアや助けがありますか？ありがとう！

2017-07-27 Joao Lopes

少なくともこれを自分でコード化しようとします。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –

..しかしflexboxはこれを行うことができます。それを試してください。 –

何を試しましたか？あなたは 'flex-box'ソリューションを探検しましたか？ htmlとcssをコードスニペットに含めて、あなたがどれだけ来ているのか、どれくらい手を伸ばす必要があるのかを知ることができます。 – UncaughtTypeError

-1

HTML

<ul class="centeredUL"> 
    <li class="firstItem"></li> 
    ... 
    <li class="lastItem"></li> 
</ul>

CSS

.centeredUL{ 
    display:inline-block; 
    width:100%; 
} 
.firstItem{ 
    float:left; 
    overflow:hidden; 
} 
.lastItem{ 
    float:right; 
    overflow:hidden; 
}

出典

2017-07-27 14:35:24

HTML：

<ul class="wide-list"> 
    <li>item...</li> 
    <li>item...</li> 
    ... 
    <li>item...</li> 
</ul>

CSS：

.wide-list li:first-child { 
    float: left; 
    overflow: hidden; 
} 
.wide-list li:last-child { 
    float: right; 
    overflow: hidden; 
}

必要がありません余分なクラスやIDの場合、より多くのアイテムを動的に追加できます。

出典

2017-07-27 14:41:14

ul最初と最後の画面を埋めるために

答えて

HTML

CSS

関連する問題