我在我的 html 中使用 Bootstrap ，但是 <a> tag即使我将 css 设置为 display:inline;，它的行为也像 block 显示
<!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>
我设置了 id="delete_button"至 display:inline但它不会与 a tag 内联.我注意到 a tag正在占用空间，所以这一定是问题所在。但后来我尝试检查 a tag并发现内容占用了开发人员工具中的所有 block (1042x24)，所以我也尝试制作它 display:inline也没有任何反应。
结果应该是 EDIT REVIEW 和 DELETE BUTTON 应该在同一行。 EDIT REVIEW 按钮应与 DELETE 按钮大小相同
最佳答案
您以某种方式将“编辑评论”按钮的宽度设置为 100%(即 width:100%;)。如果不访问您的完整代码，就很难知道这些 CSS 样式是如何应用的。
罪魁祸首可能是:
.btn-warning- 这最有可能是罪魁祸首，因为它仅应用于示例代码中的“编辑评论”按钮。a、.btn、.btn-xs- 这些不太可能，因为它们在同一示例的其他地方使用, 它们的宽度不会显示为 100%。
如果这能帮助您解决问题，请告诉我。
演示
我添加了一些 CSS 样式来模拟您的问题，并将其应用于最有可能的罪魁祸首 .btn-warning，然后演示了如何修复它(删除该行样式或用另一个类覆盖它)。
.btn-warning {
width: 100%;
}
.problem-fix {
width: auto;
}
#delete_button {
display: inline;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="card card-body bg-light">
<h4>Current Issue</h4>
<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>
<hr>
<div class="card card-body bg-light">
<h4>Demonstration of Solution</h4>
<a class="btn btn-xs btn-warning problem-fix" 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>关于html - anchor 标记 <a> 设置为内联但仍占用所有空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53907634/