嘗試對齊div中的元素

Question

我在創建一個職業頁面側欄的作業列表。 每個工作都應該包含職位和應用按鈕。 每個列表都被封裝在一個圓形的灰色框中，並帶有一定的間距餘量。

我試圖在下面這個筆中創建它，希望有人可以看看我的代碼，並告訴我如何讓按鈕浮動到右側，標題和按鈕在框中居中。

http://codepen.io/adamlcasey/pen/jIsFB

我是相當新的CSS和HTML，所以我並不在那裏，我知道什麼是最好的方式來實現這一點？在上面的筆中，我使用了兩種不同的選項。 第一個使用div，h4和元素 第二個使用div和無序列表。

注意：最終代碼需要放置在我的CMS（Hubspot）的模板中。 Hubspot有一些關於我不能使用的模板設計的規則。 （以便他們的模板保持響應）其中之一是元素。

這裏是我的代碼：

<div class="box"> 
<h4>Business Development <br> 
Manager</h4> 
<a class="button" href="http://www.my-site.com/business-development- manager">Apply</a> 

</div> 

<div class="box"> 
<ul> 
<li><h4>Customer Support <br>Agent</h4></li> 
<li><a class="button" href="http://www.my-site.com/business-development-manager">Apply</a></li> 
</ul> 
</div> 

CSS代碼：

p, h4, a, li { 
font-family: 'Open Sans',sans-serif!important; 
} 
.box { 
background: #f2f2f2; 
border-radius: 4px; 
padding: 1em 1em; 
margin: 2em 0!important; 
text-align: left; 
} 


h4, li { 
font-weight: 300; 
color: #07355C; 
display: inline-block; 
vertical-align: middle; 
} 

.button { 
font-size: 1em!important; 
padding: 5px 20px!important; 
text-decoration: none; 
-webkit-box-shadow: #e28b00 0 1px 0; 
-moz-box-shadow: #e28b00 0 1px 0; 
box-shadow: #e28b00 0 1px 0; 
background-color: #f6ae2b; 
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6ae2b),color-  stop(70%,#f39d13)); 
background-image: -webkit-linear-gradient(#f6ae2b,#f39d13 70%); 
background-image: -moz-linear-gradient(#f6ae2b,#f39d13 70%); 
background-image: -o-linear-gradient(#f6ae2b,#f39d13 70%); 
background-image: linear-grad; 
padding-left: 0; 
padding-right: 0; 
text-align: center; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
-ms-border-radius: 3px; 
-o-border-radius: 3px; 
border-radius: 3px; 
padding: 10px 20px; 
font-size: 18px; 
border: none; 
color: white; 
display: inline-block; 
vertical-align: middle; 
float: right; 
margin-right:1em; 
} 

.box ul { 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

Answer 1

這是另一種思路。我的答案中沒有提供代碼，因爲它太多了。主要是我只是增加了一些像格包裝

http://codepen.io/Nico_O/pen/ybjLE