SOURCE

	<ul class="demo">
		<li><label>艺术品</label>：<input type="text"></li>
		<li><label>作品名称</label>：<input type="text"></li>
		<li><label>姓名</label>：<input type="text"></li>
		<li><label>性别</label>：<input type="text"></li>
	</ul>
	<ul class="list">
		<li><button>10元</button></li>
		<li><button>20元</button></li>
		<li><button>30元</button></li>
		<li><button>40元</button></li>
	</ul>
	<ul class="list">
		<li><button>10元</button></li>
		<li><button>20元</button></li>
		<li><button>30元</button></li>
	</ul>

body,ul,li,button{
			margin: 0;
			padding: 0;
			font-size: 14px;
		}
		li{
			list-style: none;
		}
		.demo{
			width: 460px;
			background: #ddd;
			padding: 20px;
		}
		.demo li{
			line-height:2;
			margin-bottom: 10px;
			vertical-align: top;
		}
		.demo li input{
			border: 1px solid #ccc;
			height:24px;
			border-radius: 4px;
		}
		.demo li label{
			display: inline-block;
			width: 100px;
			text-align: justify;
			vertical-align: middle;
			height: 24px;
			line-height: 24px;

		}
		.demo li label:after{
			content: '';
			display: inline-block;
			width: 100%;
			overflow: hidden;
		}
		.last-align{
			width: 500px;
			padding: 20px;
			line-height: 2;
			text-align: left;
			text-align-last: right;
			-ms-text-align-last:right;
		}
		.list{
			width: 500px;
			margin-top: 30px;
			/* font-size: 0; */
			/*模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格，但会影响IE的解析*/
      line-height:0;
			text-align: justify;
			text-align-last: justify;
      background:#ccc;
      overflow:hidden;
      height:31px;
		}
		.list:after{
			display: inline-block;
			content: '';
			width: 100%;
			height: 0;
			overflow: hidden;

		}
		.list li{
			display: inline-block;
		}
		
		.list button{
			border: 1px solid #ccc;
			background: #fff;
			padding: 5px 10px;
		}