CSS中循环出来避免换行的方法在CSS中,有时我们需要循环出来一些内容,比如说一个列表,但是默认情况下每一项都会换行显示,这样会影响美观性。那么我们该怎么避免这种换行呢?使用display:inlin
html: <div class="list"> <p>1. Elephants</p> <p>2. Lions</p> <p>3. Tigers</p> <p>4. Bears</p> </div> css: .list p { display: inline-block; width: 100px; }
html: <div class="list"> <p>1. Elephants</p> <p>2. Lions</p> <p>3. Tigers</p> <p>4. Bears</p> </div> css: .list { width: 400px; }
html: <div class="list"> <p>1. Elephants</p> <p>2. Lions</p> <p>3. Tigers</p> <p>4. Bears</p> </div> css: .list { display: flex; flex-direction: row; } .list p { flex: 1; }
粉丝
0
关注
0
收藏
0