时间戳

首页 > 解决方案 > 如何将表单与其他元素在同一行对齐？

html - 如何将表单与其他元素在同一行对齐？

问题描述

我的卡片页脚中有元素，最后我有一个表格。但是，此表单位于其他元素的底部，而我希望它位于最后一个元素的右侧（我正在使用引导程序）。这是一个工作示例：

        .css123 {
            text-decoration: none;
            color: black;
        }

        .css123:hover {
            color: #3DB9C3 !important;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card bg-light">
                    <div class="card-body">
                        <p>
                            test
                        </p>
                        </div>
                        <div class="card-footer ">
                            <div class="float-start ">
                                <div class="text-start">
                                    <p class="card-text">
                                        <small class="text-muted ">
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test1</a>
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test2</a>
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test3</a>
                                            <form action="#" id="form-js">
                                                <a id="count-js"
                                                   class="card-subtitle css123 text-muted me-1">123
                                                    Like(s)</a>
                                                <input type="hidden" id="post-id-js">
                                                <button type="submit"
                                                        class="card-subtitle css123 text-muted me-1">
                                                    Like
                                                </button>
                                            </form>
                                        </small>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

亲切地

标签： htmlcsstwitter-bootstrap

解决方案

调整您的标记以从段落中删除表单，然后删除div.float-start和div.text-start包装（它们没有影响）。接下来添加.d-flex到div.card-footer. 在下面的示例中，我还添加.ms-auto了表单以使其右对齐（删除类以使所有内容“浮动”到左侧）。

.css123 {
  text-decoration: none;
  color: black;
}

.css123:hover {
  color: #3DB9C3 !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="card bg-light">
          <div class="card-body">
            <p>
              test
            </p>
          </div>
          <div class="card-footer d-flex">

            <p class="card-text">
              <small class="text-muted ">
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test1</a>
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test2</a>
                                            <a class="card-subtitle css123 text-muted mt-2 me-1">Test3</a>
                                            </small>
            </p>
            <form action="#" id="form-js" class="ms-auto">
              <small>
              <a id="count-js" class="card-subtitle css123 text-muted me-1">123
                                                    Like(s)</a>
              <input type="hidden" id="post-id-js">
              <button type="submit" class="card-subtitle css123 text-muted me-1">
                                                    Like
                                                </button>
                                                </small>
            </form>


          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

推荐阅读