0

フォーム要素のリストがあります。ラベルは各要素の横に表示されます。一部のラベルにはテキストがあります。ブラウザによって動作が異なります。

基本的に何が起こっているのかというと、テキストのあるラベルがリストアイテムの上に空白を作成しているということです。フォームはこれよりもはるかに複雑ですが、私はそれを次の基本的なコードに要約しました：http: //jsfiddle.net/uZ2Et/

#cleanVersion li {
    display: inline-block;
    border: 1px solid gray;
    height: 200px;
    margin: 0;
    padding: 0;
}
#cleanVersion label {
    display: inline-block;
    font-size: 70px;
    background-color: blue;
    border: 0;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 150px;
}
​

<div id="cleanVersion">
    <ul>
        <li><label>test</label></li>
        <li><label></label></li>
    </ul>
</div>​

余白、境界線、パディング、行の高さを調整しようとしましたが、それでもラベルに一貫性がありません。

テキストを含むリストアイテムの上に表示される空白を削除するにはどうすればよいですか？

編集：これは私が実際に行っていることに近い、より複雑な例です：http: //jsfiddle.net/uZ2Et/6/

4

1 に答える 1

1

vertical-align: top;リストアイテムで使用：http： //jsfiddle.net/uZ2Et/1/

于 2012-10-03T21:53:02.837 に答える