input标签 css设置

html-css014

input标签 css设置,第1张

设置的方法和详细的操作步骤如下：

1、第一步，使用sublime

 text2创建一个用于测试的新HTML页面，见下图，转到下面的步骤。

2、第二步，完成上述步骤后，在网页上添加标签和输入框，见下图，转到下面的步骤。

3、第三步，完成上述步骤后，预览效果，可以知道默认宽度为10，见下图，转到下面的步骤。

4、第四步，完成上述步骤后，通过设置size属性来修改宽度，见下图，转到下面的步骤。

5、第五步，完成上述步骤后，再次预览效果，宽度减小了，见下图，转到下面的步骤。

6、第六步，完成上述步骤后，如果修改其他内容需要添加“style”属性，见下图，转到下面的步骤。

7、第七步，完成上述步骤后，预览最终效果，可以看到宽度和高度已更改，见下图。这样，就解决了这个问题了。

涉及到input里的文字的标签大致有两种——文本框和按钮，即：

<input type="text" value="文本框" />

<input type="button" value="按钮" />这两种input标签属于“行内块元素”，它既按照块元素显示外观，又按照行内元素排列，所以想调整其内部的文字位置可按照块元素的方法来。下面是示例（仅以button为例，text同理）：

文字左右对齐，可使用text-align属性来控制，例如：<input type="button" value="按钮" style="width:80pxtext-align:left" />

文字上下对齐，可使用padding-top和padding-bottom来精确控制，例如文字靠下：<input type="button" style="padding-top:20pxpadding-bottom:0" />