html - CSS label 間距
問題描述
我做了一個radio select,選擇器。效果圖
radio中間的間距不知道是哪來的, 如果消除間距?代碼如下:html
<p class='radio-toolbar'> <input type='radio' name='radios' value='all' checked> <label for='radio1'>從不</label> <input type='radio' name='radios'value='false'> <label for='radio2'>有時</label> <input type='radio' name='radios' value='true'> <label for='radio3'>經常</label></p>
css
<style>.radio-toolbar input[type='radio'] { display:none;}.radio-toolbar>label { display:inline-block; background-color:#ddd; padding:4px ; font-family:Arial; font-size:16px;}.radio-toolbar label:first-of-type{ border-radius: 12px 0 0 12px;}.radio-toolbar label:last-of-type{ border-radius: 0 12px 12px 0;}.radio-toolbar input[type='radio']:checked + label { background-color:#bbb;} </style>
已經采納長空的答案,其余答案也是對的,最終解決方案如下
.radio-toolbar{ font-size: 0;}
問題解答
回答1:inline-block的換行符啦,我一般是設置font-size:0來解決。詳細的點這
回答2:<p class='radio-toolbar'><input type='radio' name='radios' value='all' checked><label for='radio1'>從不</label><input type='radio' name='radios'value='false'><label for='radio2'>有時</label><input type='radio' name='radios' value='true'><label for='radio3'>經常</label> </p>
把代碼都寫在一起 不要有空格 就沒有間隙了
回答3:.radio-toolbar>label 加個float: left; 父元素高度為0,你再清除浮動overflow: hidden;
相關文章:
1. mysql - 如何減少使用或者不用LEFT JOIN查詢?2. 視頻文件不能播放,怎么辦?3. mysql - jdbc的問題4. python - 編碼問題求助5. linux - python 抓取公眾號文章遇到驗證問題6. Python爬蟲如何爬取span和span中間的內容并分別存入字典里?7. 網頁爬蟲 - python 爬取網站 并解析非json內容8. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處9. node.js - nodejs開發中常用的連接mysql的庫10. python - 我在使用pip install -r requirements.txt下載時,為什么部分能下載,部分不能下載
