本文介绍了如何对齐html按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!DOCTYPE html>
<html>
<body>
<div class="border">
<ol>
<li class="nostyle">
<input type="number" name="input" style="width:120px; class="left"">
</li>
<br>
<li class="nostyle">
<div id="button">
<input type="button" value="1" class="left" />
<input type="button" value="2"/ >
<input type="button" value="3" " />
<input type="button" value="+" />
</div>
</li>
<li class="nostyle">
<div class="button" >
<input type="button" value="4" class="left" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="-" />
</div>
</li>
<li class="nostyle">
<div class="button" >
<input type="button" value="7" class="left" />
<input type="button" value="8" />
<input type="button" value="9" />
<input type="button" value="*" />
</div>
</li>
<li class="nostyle">
<div class="button" >
<input type="button" value="0" class="left" />
<input type="button" value="%" />
<input type="button" value="=" />
<input type="button" value="/" />
</li>
</ol>
</div>
<style type="text/css" media="all">
li.nostyle {
list-style-type: none;
}
.border
{
width:200px;
height:250px;
border:1px solid grey;
}
.left
{
left: 10px;
width: 30px;
}
.button{
display: block;
margin:5px;
text-align: center;
float:left;
}
</style>
</body>
</html>推荐答案
<html>
<head>
<title></title>
<style type="text/css">
li.nostyle
{
list-style-type: none;
}
.border
{
width:200px;
height:250px;
border:1px solid grey;
}
.left
{
left: 10px;
width: 30px;
}
.button
{
width:200px;
float:left;
}
.otherButton
{
width:15px;
}
</style>
</head>
<body>
<div class="border">
<ol>
<li class="nostyle">
<div class="button">
<input type="text" name="input" style="width:120px;" class="left" />
</div>
</li>
<li class="nostyle">
<div class="button">
<input type="button" value="1" class="left" />
<input type="button" value="2" class="otherButton"/>
<input type="button" value="3" class="otherButton"/>
<input type="button" value="+" class="otherButton"/>
</div>
</li>
<li class="nostyle">
<div class="button">
<input type="button" value="4" class="left" />
<input type="button" value="5" class="otherButton"/>
<input type="button" value="6" class="otherButton"/>
<input type="button" value="-" class="otherButton"/>
</div>
</li>
<li class="nostyle">
<div class="button">
<input type="button" value="7" class="left" />
<input type="button" value="8" class="otherButton"/>
<input type="button" value="9" class="otherButton"/>
<input type="button" value="*" class="otherButton"/>
</div>
</li>
<li class="nostyle">
<div class="button">
<input type="button" value="0" class="left" />
<input type="button" value="%" class="otherButton"/>
<input type="button" value="=" class="otherButton"/>
<input type="button" value="/" class="otherButton"/>
</div>
</li>
</ol>
</div>
</body>
</html>这篇关于如何对齐html按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！