html - 如何仅使用 CSS 格式化此表单

Question

给定以下 HTML 片段:

<form>  
    <p>
       <label for="id_name">Name:</label> 
       <input id="id_name" maxlength="40" name="name" type="text">
    </p>

    <p>
       <label for="id_format">Format:</label> 
       <select id="id_format" name="format">
          /*options*/
       </select>
       <span>This is a description of this item</span>
    </p>
</form>

是否可以将此表单样式设置为附图: 只使用CSS？我知道我可以将表单格式化为表格，但问题是这是否可以专门使用 css 完成。

该片段旨在显示语义。您可以根据代码段假定其他元素的 html。标签在 label 标签中，输入是 text , select , text-area , 和 checkbox等。每个条目都在 <p> 中。标签。

让输入具有相同的宽度、颜色等是没有问题的。这是困扰我的布局。我似乎无法定位和对齐所有输入，然后让标签和跨度围绕它们“流动”。

是否可以不触及 html？

Answer 1

对于结构，你可以这样做:

p label {
    display: inline-block;
    padding-right: 10px;
    text-align: right;
    width: 75px;
}

p span {
    padding-left: 10px;
}

最重要的部分是 p label 和 display: inline-block; 行供您使用。这允许标签显示为行内级 block 容器。该 block 的内部被格式化为 block 级框，元素本身被格式化为行内框。

请记住，padding 值可以根据您需要的表单样式进行调整或删除。 width 值也是如此。