Question

我创建了一个包含一系列按钮的页面。所有按钮的高度均为65像素。

由于＆＃34;自动换行＆＃34;有些按钮已经不对齐，请参阅链接图像。

enter image description here

CSS：

div {
width: 1250px;
margin: 0 0 5px 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}


h1 {
font-size: 14pt;
font-weight: bold;
font-style: italic;
margin: 0 0 5px 0
}


div button {
height: 65px;
font-size: 11pt;
text-align: center;
margin: 0;
padding: 0 3px 0 3px;
border: none;
color: white;
white-space: normal;
}

我的其余CSS只会影响按钮的颜色。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="Stylesheet" href="styles/home.css"/>
</head>
<body>
<div id="header">
    <h1>Process Framework</h1>
</div>   
    <div id="row1"> 
         <button>Manage Strategy</button><!-- 
         --><button>Manage Stakeholder</button><!-- 
         --><button>Manage Risk</button><!-- 
         --><button>Manage Manage Governance &amp Compliance</button><!-- 
         --><button>Manage Financial Performance</button>
    </div>
    <div id="row2">
        <button>B.2 Develop New Business</button><!-- 
         --><button>A.1 Manage E&amp;P Mid Term Plan</button><!-- 
         --><button>A.2 Manage Reputation</button><!-- 
         --><button>A.3 Manage E&amp;P Management System</button><!-- 
         --><button>A.4 Manage Legal Entity</button><!-- 
         --><button>A.5 Govern Non-Operated Ventures</button><!-- 
         --><button>A.6 Opportunity Maturation and Project Delivery</button>
    </div>
    <div id="row3">
        <button>C.1 Exploration</button><!-- 
         --><button>C.2 Development</button><!-- 
         --><button>C.3 Production &amp Maintenance</button><!-- 
         --><button>C.4 Abandonment</button>
    </div>
    <div id="row4">
        <button>D.1 Manage Asset</button><!-- 
         --><button>D.2 Manage Hydrocarbon Resource Volumes</button><!-- 
         --><button>D.3 Manage Integrated Activity Planning</button><!-- 
         --><button>D.4 Manage Activities</button><!-- 
         --><button>D.5 Manage Risk</button><!-- 
         --><button>D.6 Manage Processes</button><!-- 
         --><button>D.7 Manage and Deploy Technology</button><!-- 
         --><button>D.8 Information Management</button>
    </div>
    <div id="row5">
        <button>E.1 Legal</button><!-- 
         --><button>E.2 Finance &amp Controlling</button><!-- 
         --><button>E.3 Procurement</button><!-- 
         --><button>E.4 HR</button><!-- 
         --><button>E.5 HSSE</button><!-- 
         --><button>E.6 Communication</button><!-- 
         --><button>E.7 Information Technology</button>
    </div>
    <div id="footer">
    </div>
</body>
</html>

非常感谢任何帮助。

提前致谢。

Answer 1

将您的按钮放在未设置样式的无序列表中，让列表为您进行对齐。

<ul>
    <li><button></li>
    <li><button></li>
    ...
</ul>

CSS：

ul, li {
   list-style:none;
   margin:0;
   padding:0
}

li {
  float:left
}

Answer 2

将vertical-align: middle;添加到按钮。

Answer 3

您应该为您的按钮定义垂直对齐。如果你真的想保持显示内联块。否则float: left;执行此作业而不重置带有注释的按钮之间的空格（因此更易于维护）。

button { vertical-align: middle;}

按钮对齐问题 - 自动换行？

3 个答案: