Question

我想使用css实现一个表单，该表单具有不同的输入字段组的面板。

与此相似。！[替代文字] [1]

我知道这是一个桌面客户端。但有没有办法用fieldsets css实现这样的布局？

Answer 1

您可以使用float：

<form>
  <div id="col1">
    <fieldset id="fldst1"></fieldset>
    <fieldset id="fldst2"></fieldset>
    <fieldset id="fldst3"></fieldset>
  </div>
  <div id="col2">
    <fieldset id="fldst4"></fieldset>
    <fieldset id="fldst5"></fieldset>
  </div>
  <div id="col3">
    <fieldset id="fldst6"></fieldset>
    <fieldset id="fldst7"></fieldset>
    <fieldset id="fldst8"></fieldset>
  </div>
  <div style="clear:both;" />
</form>

在你的CSS中：

#col1, #col2, #col3 {
  float: left;
  width: 300px;
}

然后将不同的表单元素放在字段集中。

Answer 2

我不太确定布局的确切部分是什么。你显然知道fieldset，你的布局方式与布局任何其他HTML元素的方式完全相同（例如div）。

我猜它是列。你有两种可能性。 A）将一些fieldset s放入一个宽度为100％/列的div中并浮动这些div，或者B）如果你只需要支持现代浏览器使用CSS 3列属性和浏览器会自动为您计算每列fieldset的数量：

A）

#columns .column {
   float: left;
   width: 33%;
}

<div id="columns">
  <div class="column">
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
  </div>
  <div class="column">
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
  </div>
  <div class="column">
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
  </div>
</div>

B）

#columns {
   column-count: 3
    /* Just covering all bases here. Not sure which browsers actually support this */
   -webkit-column-count: 3
   -moz-column-count: 3
   -o-column-count: 3
   -ms-column-count: 3
}

<div id="columns">
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
     <fieldset>...</fieldset>
</div>

Answer 3

CSS：

<style type="text/css">
fieldset {
    width: 33%;
    float: left;
}
</style>

HTML：

<fieldset>
   <legend>Anschrift</legend>

    <label for="nachname">Nachname:</label>
    <input id="nachname" name="nachname" type="text">
</fieldset>

<fieldset>
   <legend>Firmenanschrift</legend>

    <label for="firma">Firma:</label>
    <input id="firma" name="firma" type="text">
</fieldset>

<fieldset>
   <legend>Einkommen</legend>

    <label for="jaresgehalt">Jaresgehalt:</label>
    <input id="jaresgehalt" name="jaresgehalt" type="text">
</fieldset>

使用css的面板形式

3 个答案: