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

.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％ - 40px，然后我将图标设置为绝对和右16px。但我不喜欢这个解决方案，因为如果我需要在右侧添加第二个图标，我必须编辑文本字段的宽度，然后玩绝对位置和右：左：没有javascript，有没有一种动态的方法来实现这一目标？在Android中我会使用toLeftOf，在css中有相同的东西吗？

此外，如果文本以2行或更多行增长，则右图像不会垂直居中。

那么，实现此类列表项的最佳方法是什么？（如果可能的话，我会避免＆＃39;浮动＆＃39;）

非常感谢

Answer 1

编辑：发布此答案后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 2

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>

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>

创建列表项的最佳方法

3 个答案: