Question

我正在尝试使用登录表单创建一个登录窗口，但是使用没有框架的自定义窗口，我想附加一些自定义按钮。我用顶部栏创建了一个窗口，一个圆圈作为一个按钮，但是试图将它向右移动似乎是不可能的。现在看来，使用以下代码

HTML

＆＃13;

body {
  background-color: rgb(48, 58, 65);
  margin: 0;
  padding: 0;
}

#controlBar {
  width: 100%;
  height: 30px;
  background-color: rgb(27, 42, 51)
}

#exit {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 100%;
  right: 0;
}

＆＃13;

<html>
<link rel="stylesheet" href="knbn_login.css">

<body>

  <div id='controlBar' style='-webkit-app-region:drag'>
    <div id='exit'></div>
  </div>

</body>

</html>

＆＃13;

在窗户的最右侧移动它的方法是什么？谢谢你的回答！

Answer 1

只需将margin-left:auto添加到元素中，如下所示：

body {
  background-color: rgb(48, 58, 65);
  margin: 0;
  padding: 0;
}

#controlBar {
  width: 100%;
  height: 30px;
  background-color: rgb(27, 42, 51)
}

#exit {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 100%;
  margin-left: auto;
}

<div id='controlBar' style='-webkit-app-region:drag'>
  <div id='exit'></div>
</div>

或者您可以在其容器上设置inline-block并使用text-align :right，如下所示：

body {
  background-color: rgb(48, 58, 65);
  margin: 0;
  padding: 0;
}

#controlBar {
  width: 100%;
  height: 30px;
  background-color: rgb(27, 42, 51);
  text-align:right;
}

#exit {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 100%;
  display:inline-block;
}

<div id='controlBar' style='-webkit-app-region:drag'>
  <div id='exit'></div>
</div>

或者像这样使用float:right：

body {
  background-color: rgb(48, 58, 65);
  margin: 0;
  padding: 0;
}

#controlBar {
  width: 100%;
  height: 30px;
  background-color: rgb(27, 42, 51);
}

#exit {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 100%;
  float:right;
}

<div id='controlBar' style='-webkit-app-region:drag'>
  <div id='exit'></div>
</div>

或position:absolute right:0，如下所示：

body {
  background-color: rgb(48, 58, 65);
  margin: 0;
  padding: 0;
}

#controlBar {
  width: 100%;
  height: 30px;
  background-color: rgb(27, 42, 51);
  position:relative;
}

#exit {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 100%;
  position:absolute;
  right:0;
}

<div id='controlBar' style='-webkit-app-region:drag'>
  <div id='exit'></div>
</div>

Answer 2

最简单的方法是使用float

right元素float:right

body{
    background-color: rgb(48, 58, 65);
    margin: 0;
    padding: 0;

} 

#controlBar{
    width: 100%;
    height: 30px;
    background-color: rgb(27, 42, 51)
}

#exit{
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 100%;
    float:right;
}

<html>
    <link rel="stylesheet" href="knbn_login.css">
    <body>

       <div id='controlBar' style='-webkit-app-region:drag'>
           <div id='exit'></div>
       </div>

    </body>

    </html>

将按钮移动到屏幕右侧

2 个答案: