input标签 css设置

html-css015

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