如何使用CSS格式化此表单 [英] How to format this form using only CSS

问题描述

给定以下HTML代码段：

 < form> 
< p> 
< label for =id_name>名称：< / label> 
< input id =id_namemaxlength =40name =nametype =text> 
< / p> 
 
< p> 
< label for =id_format>格式：< / label> 
< select id =id_formatname =format> 
 / * options * / 
< / select> 
< span>这是此项的说明< / span> 
< / p> 
< / form> 
  

可以将此表单设置为附加的图片样式：

仅使用css？我知道我可以格式化表格作为一个表，但问题是如果这可以完全与css。

该片段是为了显示语义。您可以基于代码段假设其他元素的html。标签位于标签标签中，输入为 text ， select ， text-area 和复选框等。每个条目都位于< p> 标记中。 / p>

获取输入宽度，颜色等都是没有问题的。这是布局，困扰我。我似乎不能定位和对齐所有的输入，然后有标签和跨度流动在他们周围。

有可能不触及html？ / p>

解决方案

对于结构，您可以：

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

最重要的部分是 p label 和 display：inline-block; 行。这允许标签显示为内联级块容器。此块的内部格式为块级框，元素本身格式化为内联级框。

请记住， padding 值可以调整或删除，如何需要表单样式。 width 值也是如此。

Given the following HTML snippet:

<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>

Is it possible to style this form as the attached picture: using solely css? I am aware I could format the form as a table, but the question is if this can be done exclusively with css.

The snippet is intended to show the semantics. You can assume the html of the other elements based on the snippet. The labels are in label tags, the inputs are text, select, text-area, and checkbox, etc. Each entry is in a <p> tag.

Getting the inputs all the same width, color, etc is no problem. It is the layout that is troubling me. I can't seem to position and align all of the inputs and then have the labels and spans "flow" around them.

Is it possible without touching the html?

解决方案

For the structure, you can do:

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

p span {
    padding-left: 10px;
}

The most important section is the p label and the display: inline-block; line for your purposes. This allows the label to be displayed as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box.

Keep in mind that the padding values can be adjusted or removed to how you need the form styled. Same goes with the width values.

这篇关于如何使用CSS格式化此表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！