Question

在我的应用程序中，我有一个固定的页脚，在这里我想要一个左边的输入文本框和一个右边的按钮。

我拥有的html和LESS是：

＆＃13;

.button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #1f628d 0px;
  text-decoration: none;
}

#totalPoints {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 60px;
  width: 100%;
  margin: 0 20px 0.5em 20px;
  background: #fff;
}

input {
  width: 30%;
  float: left;
}

.button {
  float: right;
}

＆＃13;

<div id="totalPoints">
  <input type="text" value.two-way="totalPoints" readonly>
  <button class="button">Test</button>
</div>

＆＃13;

我希望右边的按钮位于div的范围内，但它正在推动div之外。

有谁知道为什么？

Answer 1

#totalPoints的余量让它超出界限......

#totalPoints {
        position:fixed;
        left:0;
        bottom:0;
        height:60px;
        width:100%;
        margin: 0 0px 0px 0px; 
        background:#fff;
}

Answer 2

乍一看不确定问题，因此将代码复制到JSFiddle：https://jsfiddle.net/4yjnu9L9/。

<div id="totalPoints">
      <input type="text" value.two-way="totalPoints" readonly>
      <button class="button">Test</button>
</div>

.button {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    border: solid #1f628d 0px;
    text-decoration: none;
}

#totalPoints {
        position:fixed;
        left:0px;
        bottom:0px;
        height:60px;
        width:100%;
        margin: 0 20px 0.5em 20px; 
        background:#fff;

        input {
            width: 30%;
            float: left;
        }

        .button {
            float: right;
        }
    }

在小提琴中，似乎按钮确实出现在div的范围内。我的猜测是有一些CSS（可能是JS）覆盖了你的按钮的position属性，导致它被放置在div之外。

也许您可以打开Web控制台并查看实际应用于按钮的位置/显示/浮动属性？

如果您能提供更多信息，我很乐意跟进：）

编辑：

好像我可能弄错了。就像他的解决方案中提到的@TemaniAfif一样，设置宽度为100％的边距将对齐推出视口。可能的解决方案是将边距设置为0或将宽度设置为仅较小的百分比。

Answer 3

问题不仅在于保证金。这也是因为您指定的宽度为 100％，并且在添加边距时，您的元素#totalPoints将占用比视口更多的空间，从而向外推出的数量利润率左即可。因此，这个元素将隐藏20px，使按钮（右侧浮动）隐藏。

要解决此问题并继续使用保证金，请移除width:100%并将其替换为right:0或使用填充替换保证金并添加box-sizing:border-box。

＆＃13;

.button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #1f628d 0px;
  text-decoration: none;
}

#totalPoints {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 60px;
  right:0;
  margin: 0 20px 0.5em 20px;
  background: #fff;
}
#totalPoints-alt {
  position: fixed;
  left: 0px;
  bottom: 100px; /*Increased the bottom to see both solution*/
  height: 60px;
  width:100%;
  box-sizing:border-box;
  padding: 0 20px 0.5em 20px;
  background: #fff;
}

input {
  width: 30%;
  float: left;
}

.button {
  float: right;
}

＆＃13;

<!-- Solution with right:0  -->
<div id="totalPoints">
  <input type="text" value.two-way="totalPoints" readonly>
  <button class="button">Test</button>
</div>

<!-- Solution with padding  -->
<div id="totalPoints-alt">
  <input type="text" value.two-way="totalPoints" readonly>
  <button class="button">Test</button>
</div>

＆＃13;

为什么元素超出界限固定div？

3 个答案: