如何对齐html按钮 [英] how to align html buttons
本文介绍了如何对齐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>
推荐答案
你的CSS有问题
尝试此链接
从哪里开始？这个问题至少有六个问题：
1.你缺少< head>部分
2. CSS应该放在< head>中部分
3.输入标签中的引号错误
4.第一行按钮的id设置为'按钮''而不是班级。
5.缺少< / div>最后一排按钮的标签
6.你有一个< br />嵌套在ol元素中的标签
我可以继续...
解决方案：
Where to begin? There''s at least half a dozen problems with this:
1. You have a missing <head> section
2. The CSS should be placed in the <head> section
3. You have a misplaced quote in the ''input'' tag
4. The first row of buttons has the ''id'' set to ''button'' instead of the class.
5. There is a missing </div> tag from the last row of buttons
6. You have a <br /> tag nested within an ol element
And I could go on...
Solution:
<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>Add align=\"\" css property in your css claas
Add align="" css property in your css claas
这篇关于如何对齐html按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
