堆棧內存溢出
  簡體   English   中英

如何為所有 3 個單選按鈕保留 500px 的左邊距

[英]How to leave left margin of 500px for all 3 radio buttons

 原文  2020-01-08 12:44:16  6   5    javascript/ html/ css

問題描述

我想為所有 3 個單選按鈕留下 500px 的左邊距。 怎么做？ 請看截圖。

在此處輸入圖片說明

這是代碼： 

 <html> <head> </head> <body> <input checked="checked" type="radio" name="user_level" id="rd1" value="1"/> <label for="rd1">radio 1</label><br/> <input type="radio" name="user_level" id="rd2" value="2"/> <label for="rd2">radio asdfg</label><br/> <input type="radio" name="user_level" id="rd3" value="3"/> <label for="rd3">radio</label><br/> <style> label{ padding:5px; font-family:corbel,sans-serif; font-size: 14px; margin-left:10px; } </style> </body> </html>

5 個解決方案

解決方案1
 2  2020-01-08 12:48:34

你可以在它周圍包裹一個 div 並為該 div 編寫一個 css。 它會將您的單選按鈕內容移動到您的需要。 

 label { padding: 5px; font-family: corbel, sans-serif; font-size: 14px; margin-left: 10px; } #radioBtn { margin-left: 100px; }
 <div id="radioBtn"> <input checked="checked" type="radio" name="user_level" id="rd1" value="1" /> <label for="rd1">radio 1</label><br /> <input type="radio" name="user_level" id="rd2" value="2" /> <label for="rd2">radio asdfg</label><br /> <input type="radio" name="user_level" id="rd3" value="3" /> <label for="rd3">radio</label><br /> </div>

解決方案2
 1  2020-01-08 12:50:36

在 div 中扭曲您的內容並添加margin-left:500px 。

建議

如果屏幕寬度為320px並且您將面臨對齊問題，請使用% like 25%這將自動對齊您的內容。 

 label { padding: 5px; font-family: corbel, sans-serif; font-size: 14px; margin-left: 10px; } .margin-left { margin-left: 500px }
 <div class="margin-left"> <input checked="checked" type="radio" name="user_level" id="rd1" value="1" /> <label for="rd1">radio 1</label><br/> <input type="radio" name="user_level" id="rd2" value="2" /> <label for="rd2">radio asdfg</label><br/> <input type="radio" name="user_level" id="rd3" value="3" /> <label for="rd3">radio</label><br/> </div>

方法二

您可以通過以下方法將radio button放置在頁面中央。 

 label { padding: 5px; font-family: corbel, sans-serif; font-size: 14px; margin-left: 10px; } .margin-left { width: 200px; height: 100px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
 <div class="margin-left"> <input checked="checked" type="radio" name="user_level" id="rd1" value="1" /> <label for="rd1">radio 1</label><br/> <input type="radio" name="user_level" id="rd2" value="2" /> <label for="rd2">radio asdfg</label><br/> <input type="radio" name="user_level" id="rd3" value="3" /> <label for="rd3">radio</label><br/> </div>

解決方案3
 0  2020-01-08 12:51:14

由於label和input元素都沒有初始邊距，因此您可以將顯示設置為inline-block （例如），然后它將起作用。

片段： 

 label, input { display: inline-block; margin-left: 500px; }
 <input checked="checked" type="radio" name="user_level" id="rd1" value="1"/> <label for="rd1">radio 1</label><br/> <input type="radio" name="user_level" id="rd2" value="2"/> <label for="rd2">radio asdfg</label><br/> <input type="radio" name="user_level" id="rd3" value="3"/> <label for="rd3">radio</label><br/>

另一個解決方案（就像提到的所有其他答案一樣）是用塊元素包裝它們，然后你可以像這樣添加padding-left ： 

 div { padding-left: 100px; }
 <div> <input checked="checked" type="radio" name="user_level" id="rd1" value="1"/> <label for="rd1">radio 1</label><br/> <input type="radio" name="user_level" id="rd2" value="2"/> <label for="rd2">radio asdfg</label><br/> <input type="radio" name="user_level" id="rd3" value="3"/> <label for="rd3">radio</label><br/> </div>

解決方案4
 0  2020-01-08 12:52:48

用這個

 label{ padding:5px; font-family:corbel,sans-serif; font-size: 14px; margin-left:10px; } .mydiv{ margin-left:500px; }
 <html> <head> </head> <body> <div class="mydiv"> <input checked="checked" type="radio" name="user_level" id="rd1" value="1"/> <label for="rd1">radio 1</label><br/> <input type="radio" name="user_level" id="rd2" value="2"/> <label for="rd2">radio asdfg</label><br/> <input type="radio" name="user_level" id="rd3" value="3"/> <label for="rd3">radio</label><br/> </div> </body> </html>

解決方案5
 0  2020-01-08 13:00:34

 label { padding: 5px; font-family: corbel, sans-serif; font-size: 14px; margin-left: 10px; } .grid { display: flex; margin-top: 20px; align-items: center; justify-content: center; } .grid .col { width: 50%; }
 <html> <head> </head> <body> <div class="grid"> <div class="col">Left Content goes here</div> <div class="col"> <input checked="checked" type="radio" name="user_level" id="rd1" value="1"> <label for="rd1">radio 1</label><br> <input type="radio" name="user_level" id="rd2" value="2"> <label for="rd2">radio asdfg</label><br> <input type="radio" name="user_level" id="rd3" value="3"> <label for="rd3">radio</label><br> </div> </div> <div class="grid"> <div class="col"> <input checked="checked" type="radio" name="user_level1" id="rd1" value="1"> <label for="rd1">radio 1</label><br> <input type="radio" name="user_level1" id="rd2" value="2"> <label for="rd2">radio asdfg</label><br> <input type="radio" name="user_level1" id="rd3" value="3"> <label for="rd3">radio</label><br> </div> <div class="col">Right Content goes here</div> </div> </body> </html>

你可以嘗試這樣的事情。 它的網格布局。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 為什么'margin-top: -500px;' 不管用？ 用小於500像素的.prependto排列元素，當大於500像素時如何撤消？ 如何使用Javascript在視口下方獲取所有500px的HTML元素 jQuery或Javascript：如何查找圖像大於500像素且小於2000像素的所有html元素？ Shift MapBox 500px 如何使用純 JavaScript 在 500px 后顯示 div？ 段落中的段落達到500像素的高度后，如何將div的高度（500像素）更改為自動？ drawImage將圖像調整為500px高 JavaScript命令：»如果div寬度&lt;500px ...« 如何使用Meteor.js通過oauth 1.0向500px api進行身份驗證的請求
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM