Question

这是一项关于css的非常基本的任务。我试图将搜索栏放在屏幕的右下角，但是，当我向div添加/减少填充时，搜索栏保持在同一位置，但屏幕大小会水平增加。以下是更好理解的代码：

<!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>

这是屏幕截图

enter image description here

Answer 1

你可以这样做：

.form_style {
    width:500px;
    margin:50px ;
    float:right;
    top:-40px;
}

Answer 2

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

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

.form_style {
    /* width: 500px;*/
    /* margin: 50px; */
    position: absolute;
    right: 0;
}

Answer 3

试试这个......

    .form_style {
      position: relative;
      margin-top:-18px;
      float:right;
      right:-18px;
      top:0px;
    }

Answer 4

首先，您需要删除表单样式的边距值，然后向右移动，而不是使用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
}

选中 Demo Fiddle

Answer 5

试试吧

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

它应该有用

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

5 个答案: