欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

HTML/CSS #html中擴大搜索欄的問題

CSS
錢浩然1年前7瀏覽0評論

我在擴大HTML/CSS代碼中的搜索欄時遇到了問題。我已經嘗試調整。search-bar類，但是好像沒有什么效果。我會感謝一些關于如何解決這個問題的指導。 代碼如下: `

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <style>
            .search-button,.I-am-Feeling-Lucky
            {
                background-color: rgb(248,249,250);
                border: 1px solid rgb(248,249,250);
                border-radius: 4px;
                color: rgb(60 64 67);
                font-family: arial,sans-serif;
                font-size: 14px;
                margin: 11px 4px;
                padding: 0 16px;
                line-height: 27px;
                height: 36px;
                min-width: 54px;
                text-align: center;
                cursor: pointer;
                user-select: none;
                white-space: nowrap;
            }
            .search-bar
            {
                border: 1px solid rgb(206 212 218);
                font-size: 16px;
                padding: 20px;
                width: 100%;
                border-radius: 20px;
            }
            .Search-Bar-Section
            {
                display: flex;
                width: 100%;
                max-width: 800px;
            }
            .Lower-Section
            {
                width: 100%;
                height: 80vh;
                display: flex;
                position: relative;
                justify-content: center;
                align-items:center;
                flex-direction: column;

            }

        </style>
    </head>
    <body>       
        <div class = "Header">
            header
        </div>
        <div class = "Lower-Section">

            <div>
                <img src="photos\googlepng.png" alt ="Google">
            </div>

            <div>
                <form action="https://www.google.com/search">
                    <div class = "Search-Bar-Section">
                        <input class = "search-bar" type="text" name="q">
                    </div>
                    <div>
                        <button class = "search-button" type="submit">Google Search</button>
                        <button class = "I-am-Feeling-Lucky" type="submit" name="btnI">I am Feeling Lucky</button>
                    </div>
                </form>
            </div>

        </div>
    </body>
</html>

有人能幫我理解為什么width屬性在這種情況下不起作用嗎？

在此輸入圖像描述

我已經嘗試調整。search-bar類來使搜索欄變寬，但似乎沒有任何效果。我還試著用了！重要的宣言，但那也不起作用。