Question

我有两个按钮，要在div容器的右下角并排放置。我这样尝试过，但是按钮位于完全相同的位置，所以我只能看到其中一个。

我的按钮和div容器的CSS代码：

.buttonRight{
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
margin-left: -10px;
margin-right: 4px;
margin-bottom: 4px;
}

.box{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding-top: 10px;
width: 75%;
position: relative;
left: 0;
top: 0;
height: 60%;
background-color: rgb(204, 38, 38);
border: 2px solid black
}


    <table>
  <tr>
    <th>Name</th>
    <th>Preis</th>
    <th>Link</th>
  </tr>
  {{#each items}}
  <tr>
    <td>{{this.name}}</td>
    <td>{{this.price}}</td>
    <td><a href="{{this.link}}">{{this.name}}</a></td>
  </tr>
  {{/each}}
</table>
<a href="add"><button class="buttonRight">Add</button></a>
<a href="remove"><button class="buttonRight">Remove</button></a>

Answer 1

您可以使用与.buttonRight类完全相同的CSS来为按钮创建一个容器，而html + CSS类似于：

.buttonRight{
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
margin-left: -10px;
margin-right: 4px;
margin-bottom: 4px;
}
body {
    background-color: black;
    text-align: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    height:300px;
}
.box{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding-top: 10px;
width: 75%;
position: relative;
left: 0;
top: 0;
height: 60%;
background-color: rgb(204, 38, 38);
border: 2px solid black
}

<body>
<div class="box">
<div class="buttonRight"><button>click</button><button>click</button></div>
</div>
</body>

Answer 2

尝试使用flexbox，使用它非常简单：

.box{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding-top: 10px;
width: 75%;
position: relative;
left: 0;
top: 0;
height: 60%;
background-color: rgb(204, 38, 38);
border: 2px solid black
}

.buttonRight{
position: absolute;
add this ==> display : flex;
and this ==> align-items : flex-end
add this on its childs ==> flex : 0 //if yout want the button width and height to not stretch or shrink
bottom: 0;
right: 0;
display: inline-block;
margin-left: -10px;
margin-right: 4px;
margin-bottom: 4px;
}

Answer 3

运行并检查它，希望对您有所帮助。

.buttonRight{
position: absolute;
bottom: 10px;
right: 10px
}

.box{
margin: auto;
padding-top: 10px;
min-height:100px;
width: 75%;
position: relative;
background-color: rgb(204, 38, 38);
border: 2px solid black
}
.buttonRight div {
    display: inline-block;
}

	<div class="box">
		<table>
		<tr>
			<th>Name</th>
			<th>Preis</th>
			<th>Link</th>
		</tr>
		<tr>
			<td>name</td>
			<td>price</td>
			<td><a href="#">link</a></td>
		</tr>
	</table>
		<div class="buttonRight">
			<a href="#">One</a>
			<a href="#">Two</a>
		</div>
	</div>

将两个按钮并排放置在div的右下角

3 个答案: