リストアイテムを作成する最も良い方法

Question

私はhtml/cssで新しいです。 私は、左側にテキストを、右側にアイコンを持つ単純なリスト項目を実装する必要があります。 これは、現在の結果である：それは動作しますが、私は、私は正しい方法でそれを実装するかわからない

。 これは、htmlコードです：

<div> 
    <div class="default-list-item-text row"> 
     <div class="col-md-6"> 
      Exampe 
     </div> 
     <div class="col-md-6"> 
      11111111111111 
     </div> 
    </div> 
    <i class="mdi mdi-arrow-right default-list-item-icon"></i> 
</div> 

そして、これらは、CSSクラスです：あなたは、私が100％に、テキストフィールドのと設定見ることができるよう

.default-list-item-text 
{ 
    width:calc(100% - 40px); 
    padding:16px; 
} 

.default-list-item-icon 
{ 
    position:absolute; 
    right:16px; 
    top:14px; 
    font-size:22px; 
    color:#A9A9A9; 
} 

- 40ピクセル、その後、私は設定しましたアイコンは絶対と右の16ピクセルです。 しかし、私は右に2番目のアイコンを追加する必要がある場合、テキストフィールドの幅を編集する必要があるので、 は絶対位置と右：左：で再生するので、私はこの解決策が好きではありません。 javascriptなしでこれを実現する方法はありますか？ Androidの場合、私はtoLeftOfを使用しますが、CSSに相当するものはありますか？

さらに、テキストが2行以上になると、右側のイメージは垂直方向に中央になりません。

このようなリスト項目を実装するにはどうすればよいですか？ （可能ならば、私は「フロート」を避けるだろう）

どうもありがとう

Answer 1

フレキシボックスには最適であると思われる：

.parent { 
 
    display: flex; 
 
    align-items: center; 
 
    background: lightblue; 
 
    margin-top: 75px; 
 
    /* for demo */ 
 
} 
 
.row { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.col-md-6 { 
 
    flex: 1 
 
} 
 
.default-list-item-icon { 
 
    padding: 16px; 
 
    background: pink; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="parent"> 
 
    <div class="default-list-item-text row"> 
 
    <div class="col-md-6"> 
 
     Example 
 
    </div> 
 
    <div class="col-md-6"> 
 
     11111111111111 
 
    </div> 
 
    </div> 
 
    <i class="fa fa-arrow-right default-list-item-icon"></i> 
 
</div>

Answer 2

編集：1時間この回答を投稿した後、私はあなたが「フロート」を避けたい実現！
上記のご提案には申し訳ありません...あなたの問題に最も直接的に関連していることは確かですが、

---

あなたはこのように、新しいアイコンを追加する際に、さらに合併症を取り除くためにfloatを使用する場合があります：「全ページ」ので、本当にあなたが「フル・ページ」に切り替える必要があり、結果を参照するには：
警告ボックスは右端の疑似アイコンを隠します！

.default-list-item-text { 
 
    padding:16px; 
 
    float: left; 
 
} 
 
.default-list-item-icon { 
 
    float: right; 
 
    padding: 14px 16px 0 0; 
 
    font-size:22px; 
 
    color:#A9A9A9; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div> 
 
    <div class="default-list-item-text row"> 
 
    <div class="col-md-6"> 
 
     Exampe 
 
    </div> 
 
    <div class="col-md-6"> 
 
    11111111111111 
 
    </div> 
 
</div> 
 
    <i class="mdi mdi-arrow-right default-list-item-icon">AAA</i> 
 
    <i class="mdi mdi-arrow-right default-list-item-icon">BBB</i> 
 
</div> 
 
<div class="clear"></div>

注：

• あなたがより広く例
• に見ることができるよう、その結果、あなたはすべての一般的な情報を見て、clear: both;で次のコードを保護する必要がありますこの縮小された例をラップする他のコードに応じて発生する可能性がある複数の副作用について学ぶことができます。

Answer 3

Ulとliタグを使用してリストを作成できます。

.default-list-item-text 
 
{ 
 
    width:calc(100% - 40px); 
 
    padding:16px; 
 
} 
 

 
.default-list-item-icon 
 
{ 
 
    position:absolute; 
 
    right:16px; 
 
    top:14px; 
 
    font-size:22px; 
 
    color:#A9A9A9; 
 
} 
 

 
li{ 
 
list-style: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul> 
 
    <li> 
 
     <div class="default-list-item-text row"> 
 
      <div class="col-md-6"> 
 
       Exampe 
 
      </div> 
 
      <div class="col-md-6"> 
 
       11111111111111 
 
      </div> 
 
     </div> 
 
     <i class="mdi mdi-arrow-right default-list-item-icon"></i> 
 
    </li> 
 
     <li> 
 
     <div class="default-list-item-text row"> 
 
      <div class="col-md-6"> 
 
       Exampe 
 
      </div> 
 
      <div class="col-md-6"> 
 
       11111111111111 
 
      </div> 
 
     </div> 
 
     <i class="mdi mdi-arrow-right default-list-item-icon"></i> 
 
    </li> 
 

 
</ul>