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

debugcn 发表于 Dev

用户名

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

由于“自动换行”，某些按钮未对齐，请参见链接的图像。

在此处输入图片说明

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>

任何帮助将不胜感激。

提前致谢。

罗曼

您应该为按钮定义垂直对齐方式。如果您真的想保持显示在行内块。否则，float: left;请在不重置带注释的按钮之间的空间的情况下完成此工作（这样可维护性更好）。