如何將div定位在屏幕的最右側

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>

這是屏幕截圖

在此處輸入圖片說明

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
}

檢查這個演示小提琴

Answer 5

試試吧

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

它應該工作

如何將div定位在屏幕的最右側

問題描述

5 個解決方案

解決方案1
3 已采納 2014-10-09 15:09:05

解決方案2
0 2014-10-09 14:56:31

解決方案3
0 2014-10-09 15:11:44

解決方案4
0 2014-10-09 15:14:14

解決方案5
0 2014-10-09 15:30:24

如何將div定位在屏幕的最右側

問題描述

5 個解決方案

解決方案1 3 已采納 2014-10-09 15:09:05

解決方案2 0 2014-10-09 14:56:31

解決方案3 0 2014-10-09 15:11:44

解決方案4 0 2014-10-09 15:14:14

解決方案5 0 2014-10-09 15:30:24

解決方案1
3 已采納 2014-10-09 15:09:05

解決方案2
0 2014-10-09 14:56:31

解決方案3
0 2014-10-09 15:11:44

解決方案4
0 2014-10-09 15:14:14

解決方案5
0 2014-10-09 15:30:24