css属性label范围怎么变大

html-css018

css属性label范围怎么变大,第1张

1、增加inline-block属性值,将label标签变为行内块元素(css2.1新增)。

2、增加width属性,如将宽度设置为100px。

3、添加好后页面上所有的label标签会变为100px。

正如一号的回答,设置css的display为block;

<style type="text/css">

label{

    display: block

    height: 30%

}

html,body{

    height: 100%    /*迁就height;*/

}

</style>

很多时候文本框输入的内容是不固定的,有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些,所以需要设置input的宽度自适应。

工具原料:编辑器、jQuery

1、解决宽度自适应的思路是使用jQuery来监听输入事件,进而进行动态的改变input的宽度,实现input宽度自适应的效果。

2、首选获取文本的宽度,利用pre 元素可定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符而文本也会呈现为等宽字体,简单的代码示例如下:

1

2

3

4

5

6

7

var textWidth = function(text){

var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'})

$('body').append(sensor)

var width = sensor.width()

sensor.remove()

return width

}

3、根据以上获取到的文字的宽度来给input绑定事件动态改变宽度,简单的代码示例如下:

1

2

3

$("input").unbind('keydown').bind('keydown', function(){

$(this).width(textWidth($(this).val()))

})