html5 label定长不随文字的多少改变大小

html-css017

html5 label定长不随文字的多少改变大小,第1张

html5 label定长不随文字的多少改变大小,这个的话，我们是可以通过CSS来搞定的，设置label的width,height，那样他自然它的大小就不能被改变，这里我写一段代码：

<html>

<head>

<style>

label{

width:300px

height:200px

}

</style>

</head>

<body>

<div>

<form>

<label for="male">Male</label>

<input type="radio" name="sex" id="male" />

<br />

<label for="female">Female</label>

<input type="radio" name="sex" id="female" />

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<style type="text/css">

* {

margin: 0

padding: 0

}

.box {

padding: 0 0 0 5px

height: 35px

line-height: 35px

border: 1px solid #000

width:33% 

box-sizing: border-box

}

.box input{width: 150px}

</style>

<body>

<div class="box">

<label>姓名：</label><input type="text" name="" id="" value="" />

</div>

<div class="box">

<label>性别：</label><input type="text" name="" id="" value="" />

</div>

</body>

</html>