首頁  >  問答  >  主體

css - checkbox的文字不一样长,怎么设置能保证整齐还能显示所有文字?

在一个p里,有n个checkbox,后面的文字有长有短,很多差距都很大而且是动态添加,不知道长得有多长,如果把每个checkbox放在一个p里设定宽度,又不能隐藏剩下的信息,也不能设置滚动条,有没有什么方法能设置它又整齐又能显示所有文字。

类似这种情况:

<p style="width: 300px; margin: 0 auto; margin-top: 300px;">
        <input type="checkbox" name="chk">xxxx
        <input type="checkbox" name="chk">xxxxxxxxxx
        <input type="checkbox" name="chk">x
        <input type="checkbox" name="chk">xxxxdcgfd
        <input type="checkbox" name="chk">xx
        <input type="checkbox" name="chk">xxxxdg
        <input type="checkbox" name="chk">xxxxdfgfghhn
        <input type="checkbox" name="chk">xxxxvcb
        <input type="checkbox" name="chk">xxxxdfgsfg
        <input type="checkbox" name="chk">xxxxfgbvf
    </p>

PHPzPHPz2717 天前1617

全部回覆(8)我來回復

  • PHP中文网

    PHP中文网2017-04-17 13:43:03

    checkbox後面的文字可以用span標籤包裹,然後取得span標籤的offsetwidth

    回覆
    0
  • 阿神

    阿神2017-04-17 13:43:03

    雷雷 雷雷

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:43:03

    這個沒有辦法吧,要整齊就要設定寬度。

    回覆
    0
  • 巴扎黑

    巴扎黑2017-04-17 13:43:03

    設定好行高line-height
    再去百度看看這個屬性吧vertical-align,可以用來實現這個整齊

    回覆
    0
  • 迷茫

    迷茫2017-04-17 13:43:03

    只能保證input和文字總是在一起。

    方案:input+文字外加label標籤,並且設定樣式inline-block

    回覆
    0
  • 阿神

    阿神2017-04-17 13:43:03

    可以選擇用li標籤包裹

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:43:03

    加上一個樣式 vertical-align:middle

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 13:43:03

    這個問題是我沒有說清楚,因為資料是動態的,所以我只能根據傳過來資料字串最長的來計算設定的寬度,然而js計算字串長度用str.length的時候,不管中文字元還是英文字元都計算為1,所以只能讓後台傳過來最長字串的長度了。這是我目前的解決辦法,我不知道有沒有更好的。求指教!

    回覆
    0
  • 取消回覆