绝对定位在新行中渲染按钮答案

【问题标题】：position absolute rendering the button in a new line绝对定位在新行中渲染按钮
【发布时间】：2023-03-06 00:03:02
【问题描述】：

我有一个并排包含 2 个按钮的 div，我希望该 div 通过使用 top 和 left 属性来移动，但不幸的是，当我应用 position: absolute 时，按钮正在新行中呈现。我不希望该按钮在 position: absolute 时出现在新行中。提前致谢。

.btn-primary{
    color: #fff;
    padding: 0px 7% 0px 5px;
    height: 45px;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image:linear-gradient(#25cdf7, #1144ab);;
    border: 1px solid #ccc;
  }
  
  .btn-text{
    margin-top: 5px;
    margin-bottom: 5px;
  }

 <div>
    <a class="btn-primary"><h6 class="btn-text">Subject</h6><h5 class="btn-text">PHYSICS</h5></a>
    <i class="fa fa-caret-right" aria-hidden="true" style="font-size: 30px;"></i>
    <a class="btn-primary" style="background-image: linear-gradient(#4cad4e,#4cad4e); "><h6 class="btn-text">Topic</h6><h5 class="btn-text">FORCES</h5></a>
  </div>

jsfiddle

【问题讨论】：

你想要的输出是什么？
与 position:absolute 到该 div 的输出相同
将 display: flex 添加到 div 标签。

标签： html css bootstrap-4

【解决方案1】：

您可以通过 2 种方式达到同样的效果。

只要给那个 div white-space:nowrap;
给它最小宽度，这样两个按钮都可以放入，因为绝对定位项不带其宽度，您需要提及它。

.btn-primary{
    color: #fff;
    padding: 0px 7% 0px 5px;
    height: 45px;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image:linear-gradient(#25cdf7, #1144ab);;
    border: 1px solid #ccc;
  }
  
  .btn-text{
    margin-top: 5px;
    margin-bottom: 5px;
  }
    div {position: absolute; top: 40px; left: 100px; white-space: nowrap; width: 100%;}

<div>
    <a class="btn-primary"><h6 class="btn-text">Subject</h6><h5 class="btn-text">PHYSICS</h5></a>
    <i class="fa fa-caret-right" aria-hidden="true" style="font-size: 30px;"></i>
    <a class="btn-primary" style="background-image: linear-gradient(#4cad4e,#4cad4e); "><h6 class="btn-text">Topic</h6><h5 class="btn-text">FORCES</h5></a>
  </div>

第二个选项：

.btn-primary{
    color: #fff;
    padding: 0px 7% 0px 5px;
    height: 45px;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image:linear-gradient(#25cdf7, #1144ab);;
    border: 1px solid #ccc;
  }
  
  .btn-text{
    margin-top: 5px;
    margin-bottom: 5px;
  }
    div {position: absolute; top: 40px; left: 100px; min-width: 500px;}

<div>
    <a class="btn-primary"><h6 class="btn-text">Subject</h6><h5 class="btn-text">PHYSICS</h5></a>
    <i class="fa fa-caret-right" aria-hidden="true" style="font-size: 30px;"></i>
    <a class="btn-primary" style="background-image: linear-gradient(#4cad4e,#4cad4e); "><h6 class="btn-text">Topic</h6><h5 class="btn-text">FORCES</h5></a>
  </div>

【讨论】：

它也不应该影响按钮的宽度。我不想减小宽度
已编辑，在 div 上使用 min-width 或 width 100%，我建议使用 min-width

【解决方案2】：

申请width:100%点赞

.box{
  position:absolute;
  width:100%;
}



<div class="box">
    <a class="btn-primary"><h6 class="btn-text">Subject</h6><h5 class="btn-text">PHYSICS</h5></a>
    <i class="fa fa-caret-right" aria-hidden="true" style="font-size: 30px;"></i>
    <a class="btn-primary" style="background-image: linear-gradient(#4cad4e,#4cad4e); "><h6 class="btn-text">Topic</h6><h5 class="btn-text">FORCES</h5></a>
  </div>

https://jsfiddle.net/lalji1051/vbLxk9w8/1/

【讨论】：

【解决方案3】：

在响应式术语中，您可以将按钮绝对定位在您想要的位置。 Position:absolute 会自动更改元素的位置，但只需将margin-left/right 和/或top/bottom 与% 结合使用即可调整布局。这将使其position:absolute 和浏览器/设备响应。

例如：

.foo {position:absolute; top: 50%; margin-bottom: 25px;}

应该创建跨设备的绝对定位，这可以通过top/bottom amd margin 无限调整，正或负。没有% 的PX 可以被读取为相对值，而% 通常将自己定义为跨设备/浏览器的绝对值。一种屏幕尺寸的top: 200px; 通常会相对于另一种屏幕尺寸放置在更高或更低的位置，即使在应用position:absolute; 时也是如此。

【讨论】：