个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 16:24:49 25 4
gpt4 key购买 nike

这是关于 css 的一项非常基本的任务。我正在尝试将搜索栏放置在屏幕的最右 Angular ，但是，每当我向 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

最佳答案

尝试一下

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

它应该工作

关于html - 如何将div定位到屏幕的最右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26281567/

25 4 0
文章推荐： c++ - 通过 'Pointer 1'获取 'Pointer 3'的值
文章推荐： 用我自己的函数进行 C++ vector 排序
文章推荐： c++ - Qt中删除QStringList
文章推荐： c++ - 有人知道一个好的、免费的 C++ 调试器吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com