버튼 정렬 문제 - 단어 줄 바꿈?

일련의 버튼이있는 페이지를 만들었습니다. 모든 버튼의 높이는 65 픽셀입니다.버튼 정렬 문제 - 단어 줄 바꿈?

"단어 감싸기"때문에 일부 버튼이 정렬되지 않았습니다 (링크 된 이미지 참조).

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>

어떤 도움을 크게 감상 할 수있다.

미리 감사드립니다.

출처

2014-07-16 Yazzamahtazz

위도 게시 할 수 있습니까? –

무엇이 문제입니까? 아마 버튼에서 단어 줄 바꿈을 막으려 고할지 모르지만 대신 일어날 일을 지정해야합니다. –

버튼에 수직 정렬을 정의해야합니다. 디스플레이를 인라인 블록으로 유지하고 싶다면 그렇지 않으면 버튼과 주석 사이의 공백을 재설정하지 않고 작업을 수행합니다.  (유지 관리 용이성 때문에 더 좋음).

출처

2014-07-16 13:13:43 Romain

스타일이 적용되지 않은 정렬되지 않은 목록에 단추를 놓고 목록이 정렬되도록하십시오.

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

CSS :

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

li { 
    float:left 
}

출처

2014-07-16 13:12:25

이 버튼에 vertical-align: middle;를 추가합니다.

출처

2014-07-16 13:13:41 parchment

버튼 정렬 문제 - 단어 줄 바꿈?

답변

관련 문제