Question

button{
    
    position:fixed;
    bottom:0;
    width:100%;
    background:#000;
    color:#fff;
    padding:10px;
    margin:10px;
}

<button>Buy Now</button>

为什么我的按钮不居中？这似乎更合适。为什么固定位置与身体宽度无关？

Answer 1

button{
    
    position:fixed;
    bottom:0;
    left:0;
    width:calc(100% - 20px);
    background:#000;
    color:#fff;
    padding:10px;
    margin:10px;
}

<button>Buy Now</button>

Answer 2

从其他答案和评论我认为你想要这个。

＆＃13;

button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 20px);
  background: #000;
  color: #fff;
  padding: 10px;
  margin: 10px;
}

＆＃13;

<button>Buy Now</button>

＆＃13;

Answer 3

这让您困惑的是边缘的诡计。因为您的按钮有margin: 10px;，所以您的按钮现在的额外宽度为20px（左右10px）。您必须将100％宽度减少20px。因此，width: calc(100% - 20px);

＆＃13;

button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 20px);
  background: #000;
  color: #fff;
  padding: 10px;
  margin: 10px;
}

＆＃13;

<button>Buy Now</button>

＆＃13;

或者你可以删除保证金。

Answer 4

边距正在弄乱你的页面。你需要做的是：

＆＃13;

button{
    
    position:fixed;
    bottom:0;
    width:90%;
    left: 0; /* <- Set the left property always. */
    right: 0;
    margin: 0 auto; /* left: 0, right: 0, margin: 0 auto sets the appropriate margins. */
    background:#000;
    color:#fff;
    padding:10px;
    /* margin: 10px; <- NO MARGIN! */
}

＆＃13;

<button>Buy Now</button>

＆＃13;

Answer 5

HI现在删除您的width或margin以及定义到left right top bottom根据您的设计。

现在将按钮更改为span或div，如下所示

＆＃13;

span.btn{
    
    position:fixed;
    bottom:10px;
    background:#000;
    color:#fff;
    padding:10px;
    right:10px;
    left:10px;
}

＆＃13;

<span class="btn">Buy Now</span>

＆＃13;

Answer 6

button{
    position:fixed;
    bottom:0;
    left: 50%; /* <- Set the left property always. */
    right: 50%;
    width:100px;
    margin: 0 auto; 
    background:#000;
    color:#fff;
    padding:10px;
}

<button>Buy Now</button>

Answer 7

添加包裹div。

＆＃13;

.btn{
position:fixed;
bottom:0;
left: 0;
right: 0;
margin:10px;
}
button{
width:100%;
background:#000;
color:#fff;
padding:10px;
}

＆＃13;

<div class="btn">
<button>Buy Now</button>
</div>

＆＃13;

Answer 8

我希望你想知道为什么你的div总是溢出到正确，即使使用了右边距。所以兄弟，你必须知道每个块级别元素的默认属性是向左浮动并使用浏览器左边缘作为初始比例。因此元素倾向于溢出右边从左边缘而不是右边缘

你必须使用以下代码：

buttom{

position:fixed;
bottom:0;
left:0;
width:calc(100% - (X*2)px);// X is the margin you give. X * 2, its because margin-left + margin-right.
background:#000;
color:#fff;
padding:10px;
margin:Xpx;

}

Answer 9

试试这样：

button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 20px);
  background: #000;
  color: #fff;
  padding: 10px;
  margin: 10px;
}

HTML：

<button>Buy Now</button>

固定位置和右边混淆边距

9 个答案: