表列中的CSS浮点不起作用?

时间:2009-08-02 12:03:11

标签: css

我有两行和两列的表,

<table>
<tr>
<td> 
<form>

    <span class="descriptionsPizza">EXTRA CHEESE</span>
    <input name="minus1" type="button" class="button minus" id="minus1" value=" - " />
    <input name="textfield1" type="text" id="textfield1" class="valfield" size="2" maxlength="2" value="0" />
    <input name="add1" type="button" class="button add" id="add1" value=" + " />

</td>

<td>

    <span class="descriptionsPizza">HAM</span>    
    <input name="minus2" type="button" class="button minus" id="minus2" value=" - " />
    <input class="valfield" name="textfield2" type="text" id="textfield2" size="2" maxlength="2" value="0"/>
    <input name="add2" type="button" class="button add" id="add2" value=" + " />

</td>
</tr>

<tr>

<td>
    <span class="descriptionsPizza">MUSHROOMS</span>
    <input name="minus3" type="button" class="button minus" id="minus3" value=" - " />
    <input class="valfield" name="textfield3" type="text" id="textfield3" size="2" maxlength="2" value="0"/>
    <input name="add3" type="button" class="button add" id="add3" value=" + " />
</td>

<td>
    <span class="descriptionsPizza">PINEAPPLE</span>
    <input name="minus4" type="button" class="button minus" id="minus4" value=" - " />
    <input class="valfield" name="textfield4" type="text" id="textfield4" size="2" maxlength="2" value="0"/>
    <input name="add4" type="button" class="button add" id="add4" value=" + " />
</form>

</td>
</tr>   
</table>

我想把所有的下落放在柱子的左边和柱子右边的按钮上但是css只能用于第一列,为什么会这样?

CSS

 form span.descriptionPizza {
float:left;

        }
  form input {
float:right;


      }

任何帮助都会得到满足。

1 个答案:

答案 0 :(得分:4)

两个错误:)

  1. 在你的CSS中是span.descriptionsPizza而不是span.descriptionPizza(缺少“s”)。
  2. 将表格元素放在表格上方,而不是放在表格内,然后在表格后面将其关闭。