<a> tag is set to inline but still taking up all the space

时间：2018-12-23 22:29:13

标签： html css twitter-bootstrap

I am using bootstrap in my html but the <a> tag is acting like a block display even though I set the css to display:inline;

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
  <div class="card card-body bg-light">
    <div class="text-right">
      <a class="btn btn-success" href="#">Add Review</a>
    </div>
    <hr />
    <p> <strong>John </strong>- a tag is inline but it's still taking up the space</p>
    <a class="btn btn-xs btn-warning" href="#"> Edit Review </a>
    <form id="delete_button" action="routeToDelete" method="POST">
      <input class="btn btn-xs btn-danger" type="submit" value="Delete" >
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

enter image description here 我将id="delete_button"设置为display:inline，但它没有与a tag内联。我注意到a tag正在占用空格，所以这一定是问题所在。但后来我尝试检查a tag，发现内容已占用开发人员工具中的所有块（1042x24），因此我也尝试使其成为display:inline，但什么也没有发生。

结果应该是 EDIT REVIEW 和 DELETE 按钮应该在同一行上。编辑评论按钮的大小应与删除按钮的大小相同

1 个答案:

答案 0 :(得分：3)

以某种方式将“编辑评论”按钮的宽度设置为100％（即document.querySelector('form')）。在不访问完整代码的情况下，很难知道如何应用这种CSS样式。

罪犯可能是：

  • <form>-这是最可能的罪魁祸首，因为它仅应用于示例代码中的“ Edit Review”按钮。

  • width:100%;，.btn-warning，a-在同一示例中的其他地方使用它们的可能性较小，而宽度似乎不是100％。

让我知道这是否对您有所帮助。

演示

我添加了一些CSS样式来模仿您的问题，并将其应用于最可能的罪魁祸首.btn，然后演示了如何解决此问题（删除该样式行或用另一个类覆盖它） 

.btn-xs
.btn-warning

相关问题
最新问题