iKen
iKen
  • 发布:2016-02-02 10:06
  • 更新:2016-02-05 19:31
  • 阅读:1960

如何让<fieldset>基于外边框垂直方向对齐,而不是里面的内容底线对齐?

分类:HTML5+

代码如下:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>New Document </title>  
        <style type="text/css">  
            div {border: solid 1px green; display: inline-block;}  
            #lb1,#lb5,#lb6 {display: block;}  
            fieldset {height: 100px; margin: 10px;}  
        </style>  
    </head>  

    <body>  
        <div>  
            <fieldset>  
                <legend>FieldsetA</legend>  
                <label id="lb1">A-1:<input type="radio" name="rd1" value="A-1"/></label>  
                <label id="lb2">A-2:<input type="radio" name="rd1"  value="A-2" /></label>  
            </fieldset>  
        </div>  
        <div>  
            <fieldset>  
                <legend>FieldsetB</legend>  
                <label id="lb3">B-1:<input type="radio" name="rd2" value="B-1"/></label>  
                <label id="lb4">B-2:<input type="radio" name="rd2"  value="B-2" /></label>  
            </fieldset>  
        </div>  
        <div>  
            <fieldset>  
                <legend>FieldsetC</legend>  
                <label id="lb5">C-1:<input type="radio" name="rd3" value="C-1"/></label>  
                <label id="lb6">C-2:<input type="radio" name="rd3"  value="C-2" /></label>  
                <label id="lb7">C-3:<input type="radio" name="rd3"  value="C-3" /></label>  
            </fieldset>  
        </div>  
    </body>  
 </html>  
2016-02-02 10:06 负责人:无 分享
已邀请:
maq

maq

试了一下,别说,还真做不出你这个效果,天生就是底部对齐的。

  • iKen (作者)

    感觉真的无法理解,呵

    2016-02-02 14:16

  • maq

    你应该贴代码出来,让别人能够重复问题现象,才有可能帮到你。

    2016-02-02 14:40

DCloud_UNI_FXY

DCloud_UNI_FXY

fieldset {height: 100px; margin: 10px;float:left}
  • iKen (作者)

    用float涉及其它问题,不想用这个

    2016-02-15 09:26

iKen

iKen (作者)

求答案

maq

maq

加上这条样式:

fieldset {display:inline-block; vertical-align:bottom;}
maq

maq

或者加上这条样式,效果是一样的,因为你的 div 本来已经是 inline-block 了:

div {vertical-align:bottom;}
  • iKen (作者)

    谢谢您的回答,div {vertical-align:bottom;}是可以的,但其实div只是我问这个问题时为了显示效果而多加的,如果没有div,fieldset {display:inline-block; vertical-align:bottom;}好像不行啊

    2016-02-15 09:26

  • maq

    回复 iKen:试了一下去掉 div,没问题啊。

    2016-02-15 14:05

该问题目前已经被锁定, 无法添加新回复