创建列表项目的最佳方式

我是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类：

.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; 
}

正如你可以看到我设置与文本字段的100％ - 40像素，然后我设置图标作为绝对和正确的16px。但我不喜欢这个解决方案，因为如果我需要在右侧添加第二个图标，我必须编辑文本字段的宽度，然后用绝对位置和右：左：进行播放。有没有JavaScript的方法来实现这一目标？在Android中，我会使用toLeftOf，在CSS中有没有相同的东西？

此外，如果文本在2行或更多行中生长，右图不会垂直居中。

那么，实现这样的列表项目的最佳方式是什么？（如果可能的话，我会避免“浮动”）

非常感谢

来源

2016-03-25 user3471528

Flexbox的似乎是最理想的：

.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>

来源

2016-03-25 18:09:25

编辑：发布这个答案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;代码，你可以在例如
更广泛地看，看所有的一般信息可用于了解可能发生的多种副作用，这取决于其他代码包装这个简化的例子！

来源

2016-03-25 16:20:53 cFreed

您可以使用UI和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>

来源

2016-03-25 16:22:45

创建列表项目的最佳方式

回答

相关问题