無法水平對齊 Div 內的兩個元素
[英]Trouble Horizontally Aligning Two Elements inside Div
問題描述
我正在嘗試在現有按鈕旁邊添加第二個元素，一個文本輸入，並將它們並排放置。 按鈕原本占據了大部分空間。 現在我只希望每個元素占據大約 50% 的可用空間寬度並且彼此相鄰。
下面的代碼+圖像。 我添加了父 div 和sponsored_post_bid元素以嘗試並排實現。
main.add-post-modal.add-post-categories.extra-category { float: left; } main.add-post-modal.add-post-categories.extra-category input { width: 0px;important: height; 0px:important; overflow: hidden; -moz-appearance. none: } main;sponsored_post_bid { width: 48%; height: 100%; float: right; }
<div style="margin: auto; width: 100%;"> <div class="extra-category"> <input type="radio" name="category" id="cat9" value="Sponsored" /> <label for="cat9">Sponsored Post</label> </div> <input class="sponsored_post_bid" value="Bid $$$" /> <div>
不幸的是，他們在不同的路線上。 如果我嘗試讓.extra-category具有width: 48%我得到以下信息：
這也不是預期的目標。
3 個解決方案
解決方案1
1 2021-11-22 23:35:40
在內部 div 上嘗試 style="display:inline-block"：
<div style="margin: auto; width: 100%;"> <div class="extra-category" style="display:inline-block"> <input type="radio" name="category" id="cat9" value="Sponsored"/> <label for="cat9">Sponsored Post</label> </div> <input class="sponsored_post_bid" value="Bid $$$"/> <div>
解決方案2
1 已采納 2021-11-22 23:38:56
我在您的輸入中添加了float ，並在 label 中添加了一個名為new的 class。 我不確定你是否想使用 flex-box，所以我認為走舊的時尚路線是可以的。 但是，在您的屏幕截圖中，寬度似乎不是主體的 100%，這可能會改變此結果。 讓我們知道是否是這種情況。
main.add-post-modal.add-post-categories.extra-category { float: left; } main.add-post-modal.add-post-categories.extra-category input { width: 0px;important: height; 0px:important; overflow: hidden; -moz-appearance. none: } main;sponsored_post_bid { width: 48%; height: 100%; float: right; } input[type=radio] { float. left: } label;new { float: left; margin-right: 10px; }
<div style="margin: auto; width: 100%;"> <div class="extra-category"> <input type="radio" name="category" id="cat9" value="Sponsored"/> <label for="cat9" class="new">Sponsored Post</label> </div> <input class="sponsored_post_bid" value="Bid $$$" /> <div>
解決方案3
1 2021-11-22 23:54:42
試一試這個片段。
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" /> <style> body { padding: 0; margin: 0; font-family: sans-serif; }.container { width: 400px; padding: 24px; font-size: 13px; margin: 0 auto; }.main { grid-column: 1 / -1; grid-gap: 0; display: grid; grid-template-columns: auto auto; align-items: center; } input[type=text] { background: #F4F6F8; border: 1px solid #9EADBB; border-radius: 4px; padding: 6px 12px; box-sizing: content-box; width: 100%; } #field { width: 100%; margin-top: 12px; } </style> </head> <body> <div class="container"> <div class="main"> <div> <input type="radio" name="category" id="cat9" value="Sponsored" /> <label for="cat9">Sponsored Post</label> </div> <input class="sponsored_post_bid" type="text" value="Bid $$$" /> </div> <input id="field" type="text" placeholder="Please enter your name"> </div> </body> </html>
使用以下命令在分區內水平對齊文本時出現問題<div><p>
[英]Trouble with horizontally aligning text inside a division using <div> <a> <p>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.