Question

方？

div的当前css：

background-color: white;
width: 60%;
border-radius: 5px;
margin-top: 30px;
margin-bottom: 0; 
margin-right: auto; 
margin-left: auto;
position: relative;

Answer 1

只需在css下面使用

<parent selector> {
    position: relative;
}
button {
    position: absolute;
    left: 100%;
    top: 5px;
}

Answer 2

以下是帮助您解决问题的示例代码：

.parent {
    position: relative;
}
button {
    position: absolute;
    right: 10px;
    top: 5px;
}

<div class="parent">
<button>Button</button>
</div>

Answer 3

请检查一下。我试图制作像你的形象。

body{background:green;}
.super{
  background-color: white;
width: 60%;
border-radius: 5px;
margin-top: 30px;
margin-bottom: 0; 
margin-right: auto; 
margin-left: auto;
position: relative;height:600px;
}
button{background:red; position: absolute;
    right: -79px;
    width: 80px;
}
button.second{top:21px;}

<!DOCTYPE html>
<html>
<head>

</head>
<body>
 <div class="super">
 	<button>Sign In</button>
    <button class="second">Sign Up</button>
 </div>
</body>
</html>

希望这会对你有所帮助。

感谢。

Answer 4

请阅读CSS文档，您将了解 float 属性，该属性允许块元素 float 以便彼此相邻。

参考http://www.cssbasics.com/。我希望这个链接可以帮到你。

如果你想编码相同的结构，那么代码就是

＆＃13;

#wrapper {
  background: #4caf50;
  padding: 10px;
  overflow: hidden;
}
#search-bar {
  background: #fff;
  width: 80%;
  float: left;
  min-height:500px;
}
#sidebar {
  width: 20%;
  float: right;
}

#sidebar .button{
  background:#F44336;
  color:#ffffff;
  padding:5px;
  text-align:center;
  margin-bottom:5px;
}

＆＃13;

<div id="wrapper">
  <div id="search-bar">Content</div>
  <div id="sidebar">
    <div class="button">Sign In</div>
    <div class="button">Sign Out</div>
  </div>
</div>

＆＃13;

我希望这会帮助你。

我如何在右侧放置按钮（css）

4 个答案: