css 如何让按钮始终与屏幕保持一定距离？

Question

我希望我的 doButton 距屏幕右边缘 30px，我的 Fund 按钮距屏幕左边缘 30px，例如：

 FundButton      Item task descriptiion goes here                   DoButton

这是我的 HTML

      <div ng-repeat="x in todoList">
      <li class="item item-checkbox">
      <label class="checkbox">
      </label>
      <!-- this is the checkbox element, you will see it is bound to the done setting in the items array -->
      <!-- When clicked it calls the update function to update the item to its done status -->
      <input type="checkbox" ng-model="x.done" ng-click="update()"></input>
      <!-- this is a span tag that shows the item text, I am using ng-bind, instead of the span tag we could have used {{x.todoText}} as well -->
 &nbsp;&nbsp;<span><button class="fund-button">Fund</button>       </span>
    <span>{{x.todoText}} </span> <span>      <button class="doButton">Do</button></span>
      </li>
      </div>

我的 css 到目前为止：

我的css

.doButton{
float: left;
clear: left ;
}

.fund-button{
clear: right;
float: right

}

Answer 1

通过为标签添加 margin-left，您可以将 div 移动相应的 space 量。

.doButton{
    display:inline-block;
    float: left;
    clear: left ;
    margin-left:30px;
}
.fund-button{
    display:inline-block;
    clear: right;
    float: right
    margin-right:30px;
}

Answer 2

去掉按钮上的包装 <span>。它们会阻止您的花车以您期望的方式显示。

此外，您的 css

中不需要 clear: left; 和 clear: right;

这是一个jsFiddle

css 如何让按钮始终与屏幕保持一定距离？

How to position a button to be always a certain distance from the screen in css?

html

css

positioning