0

テキスト入力と2つのチェックボックスを並べて表示するHTMLがあります。HTMLはツールによって生成されるため、HTMLの作成方法を変更することはできず、CSSを使用してのみスタイルを適用できます。私の簡略化されたHTMLとCSSは次のとおりです。

<html>
 <head>
  <style type="text/css">
  td {
    padding: 0;
    }
  fieldset {
    display: inline;
    padding: 0;
    margin: 0
    }
  input[type="text"] {
    margin: 0;
    padding: 0;
    }
  table.checkboxs  {
    border-collapse:collapse;
    }
  table.checkboxs td {
    border: none;
    margin: 0;
    padding: 0;
  }
 </style>
 </head>
 <body>
     <input type="text" id="item1" value="" />
     <fieldset>
      <table summary="" class="checkboxs" border-collapse="">
       <tr>
        <td><input type="checkbox" id="chkbox_0" name="chkbox" value="1"   /><label for="chkbox_0">One</label></td>
        <td><input type="checkbox" id="chkbox_1" name="chkbox" value="2"   /><label for="chkbox_1">Two</label></td>
       </tr>
      </table>
     </fieldset>
 </body>
</html>

これにより、チェックボックスが次のようなテキストアイテムよりも上に表示されます。

スクリーンショット1

私が欲しいのは、これらが次のように整列していることです。

スクリーンショット2

それは簡単に思えますが、それを達成する方法がわかりません。テキスト入力またはフィールドセットのいずれかを削除すると、残りの要素が最小の垂直方向のスペースを占有します。テキスト入力がページにプッシュされるのは、それらが一緒になっている場合のみです。

HTMLの欠点を必ず指摘してください。しかし、私が言ったように、それは実際には私の管理下にはないので、CSSを使用してのみレイアウトに影響を与えることができます。

4

3 に答える 3

2

私が考えることができる2つの簡単な解決策があります。1 つ目は、次のように設定して、テーブルを通常のテキストのように動作させて整列させることです。

table.checkboxs {
    display:inline-block;
    vertical-align:middle;
}

JSFiddle の例

または、テーブルのように動作するようにテキスト ボックスを配置します。

input[type="text"] {
    vertical-align:top;
}

JSFiddle の例

于 2012-08-02T16:27:58.947 に答える
1

float:left を input と fieldset の両方に与えてから、必要に応じて margin-top を使用して目的を達成してください。

于 2012-08-02T16:11:02.860 に答える
1

試す

input {
 display: inline-block;
}

fieldset {
 display: inline;
 padding: 0;
 margin: 0
}
于 2012-08-02T16:20:41.390 に答える