CSS布局中遇到的问题
一、一些行内元素无法设置宽高的问题
（1）到底什么是块级元素，行内元素
块级元素会独占一整行，而行内元素会在一行中一次排列，这和他们的display属性有关
块级元素: dispaly:block;
内联元素: display:inline;
（2）块级元素和内联元素的特性
块级元素可以显示的设置其宽高（width,height）,在文档流中，从上到下一个接一个的垂直排列。元素之间的距离可以有margin设置。
内联元素在一行中水平排列，显式的设置其宽高无效，只能通过设置其内边距，边框，外边距来调整它们的水平距离。可以通过边框，垂直方向上的内边距来设置内联元素的高度。
（3）理解内联元素（行内框）和行框之间的区别
简单的说。行内框就是所谓的行内元素。行框就是行内框所在的那一行。习惯行内元素的叫法。
设置行高line-height属性可以增加这个框的高度。切记：修改行内框尺寸的唯一方法就是修改行高，内联元素的边框，内边距，外边距，显示的设置宽高属性无效。
1、内联元素排列
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>解决行内元素不能设置宽高的问题</title>
6 <style type="text/css">
7 div span{
8
9 border: 1px solid #000;
10 width:100px; /*显示的设置宽高无效*/
11 height: 100px
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17 <span>1</span>
18 <span>2</span>
19 <span>3</span>
20 <span>4</span>
21 <span>5</span>
22 </div>
23 </body>
24 </html>
2、可以很明显看出，设置width和height属性对内联元素不起任何作用，只有通过设置行内元素的内边距，水平外边距，边框宽度，以及行高，才可以改变其大小。核心代码如下：
<style type="text/css">
span{
border: 1px solid #000;
/*width:100px; 显示的设置宽高无效
height: 100px;*/
padding: 20px; /*设置其上下左右的内边距，行内元素就会被撑开*/
margin-left: 20px; /*设置其水平方向上的外边距，元素之间的距离就会被拉开。*/
margin-top:20px; /*设置垂直方向上的外边距无效*/
line-height: 50px; /*设置行高，也就是行框的高度，影响的行内元素所在的那一整行，元素本身不受影响*/
font-size: 30px; /*字体大小影响行内元素大小*/
color:red;
}
</style>
由上可以看出，影响行内元素大小和元素之间距离的只有字体大小(font-size),水平方向上的外边距，边框宽窄，以及内边距，不受宽高（width，height）的影响
3、行框包着行内元素（行内框）
外面的框就是行框，设置其line-height属性值就可以增加其高度。行框的高度总是足以容乃它所包含的所有行内框（行内元素）。
（4）如何设置行内元素宽高
①将行内元素的dispaly属性设置为block,就可以显示的设置的宽高，但此时行内元素也会独占一行
②将行内元素display属性设置为inline-block,也可以设置宽高，并且此时的行内元素仍然在水平方向上依次排列。但低版本IE浏览器对该属性支持很差（IE8以下）
③将行内元素浮动。浮动（float）必须作用到块级元素上，如果在行内元素上应用该属性，行内元素就会被隐式的转化为块级元素，这时就可以显示的设置宽高了。但浮动会影响其兄弟元素。（浮动会脱离文档流），该方法常常用在表单布局的label属性上，可以设置label属性宽度，从而使Input框垂直对齐。
1 <style type="text/css">
2 ul{
3 list-style: none;
4 }
5 ul li label{
6 float: left; /*将label标签左浮动，此时就被隐式的转换成了inline-block元素，可以设置其宽高，因为它浮动了，左边的input框就会向左移动，直到碰到Label元素边框(设置过宽度之后的边框），只需要设置它们之间的外边距，就可以呈现整齐的效果了*/
7 width:200px;
8 text-align: right;
9 font-size: 20px;
10 /*border: 1px solid #000;*/
11 }
12 ul li{
13 margin: 10px;
14 }
15 ul li input{
16 margin-left: 10px;
17 }
18 ul li button{
19 margin-left: 240px;
20 }
21 </style>
22 </head>
23 <body>
24 <h3>表单设计中内联元素label宽高设置的方法</h3>
25 <div>
26 <form>
27 <ul>
28 <li>
29 <label for="userName">用户名</label>
30 <input type="text" name="userName" id=userName>
31 </li>
32 <li>
33 <label for="userPwd">密码</label>
34 <input type="text" name="userPwd" id=userPwd>
35 </li>
36 <li>
37 <label for="userTel">联系方式</label>
38 <input type="text" name="userTel" id=userTel>
39 </li>
40 <li><button>立即提交</button></li>
41 </ul>
42 </form>
43 </div>
44 </body>
通过浮动就可以设置其宽度，就可以呈现出整齐的效果了！
参考：精通css高级web标准解决方案