个人中心
gpt4 book ai didi

html - 将按钮放在列表的右下角

转载 作者：太空宇宙 更新时间：2023-11-03 19:28:38 26 4
gpt4 key购买 nike

请参阅随附的代码片段。我有一个“元素”组件，我将在其中动态检索标题和一些元素符号描述。

每个元素都会有一个“添加元素”按钮，我希望它与列表的右下角对齐 - 不在下方。

我怎样才能做到这一点，同时确保列表文本在适当的地方放到一个新行上？

我想避免将跨度放在列表中。是否有 Bootstrap 方法可以做到这一点，如果没有，是否有其他方法？

谢谢，

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


  <body>
    <div class="container bg-info">
      <div class="col-xs-4">
        <h1>Item Title</h1>
      </div>
      <div class="col-xs-8">
        <span type="button" class="btn btn-success pull-right">Add Item</span>
        <ul class="list-unstyled">
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 1, Description 1, Description 1, Description 1</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 2
            </li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 3, Description 3, Description 3, Description 3</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 4, Description 4, Description 4, Des 4</li>
        </ul>
      </div>
    </div>
  </body>

最佳答案

我认为你可以使用位置

.container {
    position: relative;
}

.btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

编辑
尝试为您的 ul 添加宽度

.list-unstyled {
    width: 85%;
}

关于html - 将按钮放在列表的右下角，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41940658/

26 4 0
文章推荐： python - 在模板中显示文本？
文章推荐： c# - 在 login.aspx 和 default.aspx 之间进行通信
文章推荐： c# - 在循环中创建位图时出现内存溢出异常
文章推荐： 使用 Template 对象的 Python 固定宽度字符串