如何在html/css中搜索一組搜索欄？

我試圖讓一些搜索欄和提交按鈕排隊，但我不知道該怎麼做。我知道這可能很簡單，但我是HTML新手。（哦，這只是瀏覽器的一部分，通常不會看起來那麼糟糕，因爲這的xD如何在html/css中搜索一組搜索欄？

.center-block{ 
    margin-top: 220px; 
    text-align: center; 
} 
.searchboxes{ 
    width: 500px; 
    opacity: 0.6; 
    font-weight: bold; 
    border-radius: 25px; 
    text-align: center; 
    margin: 0; 
} 
.searchboxes:hover{ 
    opacity: 1; 
    font-weight: bold; 
} 
.clickboxes{ 
    opacity: 0.6; 
    font-weight: bold; 
    font-family: Arial; 
    background-color: white; 
    border-radius: 25px; 
    margin-top: 480px; 
    text-align: center; 
    margin: 0; 
} 
.clickboxes:hover{ 
    opacity: 1; 
    font-weight: bold; 
}

<div class="col-md-6"> 
    <img class="center-block" src="/assets/logo.png" alt="MsearchLogo" style="width:480px;height:270px;"> 

     <form id="vb_yt_search-form" action="https://duckduckgo.com/" method="get" target="_blank"> 
    <input name="q" type="text" maxlength="128" class="searchboxes" /> 
    <input type="submit" value="DuckDuckGo" class="clickboxes" /> 
     </form> 
     <br /> 
    <form id="vb_yt_search-form" action="http://www.google.com/search" method="get" target="_blank"> 
    <input name="q" type="text" maxlength="128" class="searchboxes" /> 
    <input type="submit" value="Google" class="clickboxes" /> 
    </form> 
    <br /> 
<form id="vb_yt_search-form" action="http://www.youtube.com/results" method="get" target="_blank"> 
    <input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" class="searchboxes" /> 
    <input type="submit" value="Youtube" class="clickboxes" /> 
</a> 
</form> 
</div>

來源

2017-05-30 Shayodonn10

要在HTML和CSS中心的東西，你的兩個最簡單的選項是：

與text-align: center
全寬容器全寬的容器，兒童display: block;margin: 0 auto;

第一個給你是一個容器，其中所有的孩子將通過排版算法居中。這通常運行良好，非常簡單，但是集中了所有的孩子，所以不適用於所有用例。

第二個給你一個孩子，它將在自己的行（display: block），它將在父母的中心使用相等的邊緣在任何一方填補任何父母的空白寬度（margin: 0 auto給出零頂部/底部邊距和自動左/右邊距）。

在你的示例代碼，您可以使用：

.col-md-6 { 
    width: 100%; 
    text-align: center;

}

其中中心包含搜索框的線條;然而，因爲搜索按鈕是不同的寬度，整體效果是有點關閉。你可以將每一行（搜索框+按鈕）放在一個固定寬度的容器中，或者你可以給這些按鈕設置一個足夠大的按鈕來放置最大的一個;或者你可以把按鈕和搜索框放在不同的行上。

來源

2017-05-30 18:29:44 Adrian

感謝您的回答 – Shayodonn10

-2

在HTML中，你可以使用該中心的標籤。

來源

2017-05-30 18:20:36

如果您使用Bootstrap，則可以將類col-md-offset-3添加到您的div標記中，並且包裹在該div標記中的所有內容都將位於頁面的中心如果搜索欄和clickbox不在一行中，請將margin-top設置爲點擊框類爲零。

來源

2017-05-30 18:27:50

謝謝，我會試試 – Shayodonn10

-1

我不確定我是否正確理解您，但請嘗試使用文本對齊：在表單中居中。

來源

2017-05-30 18:29:51

如何在html/css中搜索一組搜索欄？

回答

相關問題