css样式中怎么让三个按钮在水平位置对齐

html-css08

css样式中怎么让三个按钮在水平位置对齐,第1张

把按钮全部放在DIV里面，然后设置DIV的样式就可以了。

<title>无标题文档</title>

<style type="text/css">

#nav{ text-align:center}

</style>

</head>

<body id="nav">

<div class="1"><input name="" type="text" value="用户名"width="150px" height="20px"/></div>

<div class="2"><input name="" type="text" value="密码" width="150px" height="20px"/></div>

<div class="3"><input name="" type="button" value="登录" />

<input name="" type="button" value="注册"/>

<input name="" type="button" value="游客"/></div>

</div>

</body>

效果如图，直接就水平对齐。

那个是不是图片是不是作为button的背景图片，图片里面有文字的对吧？

1、建议你可以使用a标签，这样a标签是个行内元素，这样大小就由图片做控制了

2、既然是作为背景的话，你可以用background-position，里面有xpos

ypos参数，可以定位使用

<style type="text/css">

.box{width:1000pxheight:40pxmargin:50px autoborder:1px solid #3366CCline-height:40pxtext-align: center}

.btn-left{height:25pxwidth:25pxborder:1px solid #000}

.btn-right{height:25pxwidth:25pxborder:1px solid #000}

.fl{float:left}

ul{list-style:nonepadding: 0}

ul li{height:8pxwidth:8pxborder-radius:8px 8pxbackground-color:#888888float:leftmargin-left:3px}

.div1{

display: inline-block

}

</style>

</head>

<body>

<div class="box">

<div class="div1">

<button class="btn-left fl">asd</button>

<ul class="fl">

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<button class="btn-right fl">asd</button>

</div>

</div>

</body>