CSS特定の箇条書きを1行に表示するスタイルを設定する

Question

次の例では、項目2と3を並べて表示し、残りを並べ替えられていないリストとして残したいと考えています。どのようにCSSでこれを行うには？

<li><i class="icon-caret-right"></i>textone</li> 
 
<li><i class="icon-caret-right"></i>texttwo</li> 
 
<li><i class="icon-caret-right"></i>textthree</li> 
 
<li><i class="icon-caret-right"></i>textfour</li>

このコードは以下のように示しています。

textone

texttwo

textthree

textfour

しかし、私は、以下のこのイメージとしてこれを表示したいです。どのようにCSSでこれを行うには？

Answer 1

シンプルフロートとそれを行う必要がありますマージン。

.stack { 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
}

<li><i class="icon-caret-right"></i>textone</li> 
 
<li class="stack"><i class="icon-caret-right"></i>texttwo</li> 
 
<li><i class="icon-caret-right"></i>textthree</li> 
 
<li><i class="icon-caret-right"></i>textfour</li>

Answer 2

flexboxがオプションである場合は、flexboxを包むを使用することができます。

1. 各フレックス項目は100％flex-basis

2. 秒を持っています3番目の項目はhこれは、2と3は同じラインに来るようになりますflex-basis

自動AVE - デモ下記参照：

ul { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-wrap: wrap; 
 
} 
 
ul > li { 
 
    flex: 1 1 100%; 
 
} 
 
ul > li:nth-child(2), ul > li:nth-child(3) { 
 
    flex: 1 1 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<ul> 
 
    <li>textone</li> 
 
    <li>texttwo</li> 
 
    <li>textthree</li> 
 
    <li>textfour</li> 
 
</ul>

Answer 3

ul { 
 
    /* removing bullet */ 
 
    list-style-type: none; 
 
} 
 

 
li:before { 
 
    /* adding bullet as pseudoelement's content */ 
 
    content: "• "; 
 
} 
 

 
li:nth-child(2), 
 
li:nth-child(3) { 
 
    /* display item as inline or inline-block */ 
 
    display: inline-block; 
 
}

<ul> 
 
    <li><i class="icon-caret-right"></i>textone</li> 
 
    <li><i class="icon-caret-right"></i>texttwo</li> 
 
    <li><i class="icon-caret-right"></i>textthree</li> 
 
    <li><i class="icon-caret-right"></i>textfour</li> 
 
</ul>