logo标签列表

如何将 div 定位到屏幕最右侧

htmlcss
9
这是一个与CSS相关的基本任务。我想把搜索栏放在屏幕的最右侧，但是，当我给div添加/减少padding时，搜索栏仍然保持在同一位置，但屏幕的水平长度增加了。这是代码，以更好地理解：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>

        <meta charset="UTF-8">
        <title>cats</title>

    </head>
    <body>
    <form class="form_style">
        <input type="text" class="search" placeholder="Search me..." required>
        <input type="button" class="button" value="Search">
    </form>

    <div id="top_menu"> 
      <ul>
        <li><a href="suomeksi.php">Suomeksi</a></li>
        <li><a href="log_in.php">Log in</a></li>
        <li><a href="sign_in.php">Sign in</a></li>

     </ul>

    </div>

    <style type="text/css" media="screen">

    #top_menu {

        height: 35px;
        font-size: 18px;
        text-align: center;
        border-radius: 8px;
            }

    #top_menu li { 
        display: inline; 
        padding: 20px; 
            }

    #top_menu a {
        text-decoration: none;
        color: #00F;
        padding: 1px 1px 1px ;
            }

    .form_style {
        width:500px;
        margin:50px ;
        position: absolute;

        left: 80%;
        top:-40px;
            }

    .search {
        padding:8px 15px;
        background:rgba(50, 50, 50, 0.2);
        border:0px solid #dbdbdb;
            }

    .button {
        position:relative;
        padding:6px 15px;

        left:-5px;
        border:2px solid #207cca;
        background-color:#207cca;
        color:#fafafa;
            }

    .button:hover {
        background-color:#fafafa;
        color:#207cca;
            }


    </style>


    </body>
</html>

以下是屏幕截图：

这里是图片描述

1
在元素（我认为是form_style）上添加float: right; - Dennis Anderson
1
对于一个绝对定位的元素，right: 0px 就可以了。 - nilobarp
这个没有起作用。 - Cash Vai
你把 left: 80% 给移除了吗？ - nilobarp
这是我现在拥有的代码：.form_style { 宽度：500像素; 边距：50像素; 位置：绝对定位; 左浮动;} - Cash Vai
宽度让你产生了错误的想法，去掉它。 - yunandtidus
5个回答
5
您可以简单地执行以下操作：
.form_style {
    width:500px;
    margin:50px ;
    float:right;
    top:-40px;
}
5

试试它

.form_style 
    {
    position: absolute;
    right: 0;
}

它应该能够正常工作。

0

右对齐元素的CSS应包含right:0

也许您还需要删除宽度和边距定义

.form_style {
    /* width: 500px;*/
    /* margin: 50px; */
    position: absolute;
    right: 0;
}
确实，它有效。问题在于你的500px form_style粘在右边，250px是空的，看起来像是空间。 - yunandtidus
0

试试这个......

    .form_style {
      position: relative;
      margin-top:-18px;
      float:right;
      right:-18px;
      top:0px;
    }
1
你好Paul，欢迎来到StackOverflow。这个答案由于长度被标记为需要审核。在SO上，我们试图防止仅有代码的回答，更倾向于提供一些解释伴随着代码一起。请阅读[答案]。 - Software Engineer
0

首先，您需要删除表单样式的边距值，然后将其定位到右侧而不是使用left值，并对齐内容：

.form_style {
    width:500px;
    margin:50px ;     //Make this 0;
    position: absolute;
    right:0;          //Add Right and remove left
    top:0;            //Make this 0;
    text-align:right; //Align the elements inside form to the right
}

请查看此演示 Fiddle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接