不能使這個CSS按鈕工作

Question

http://jsfiddle.net/72nEy/

我試圖沒有使用ul或li的樣式，我必須做什麼？或者任何可以提供幫助的資源？

我需要它只是被

<a href="http://designshack.net/" class="action-item">Want to Voluneer</a> 

Answer 1

簡稱嘿像這樣也許可以幫助？

<a href="/contact-val" style="width:300px;height:200px;display:block;background-color:red;"> 
      <p>Want to Volunteer</p> 
</a> 

Answer 2

的HTMl

<div class="action-center"> 
    <div class="action-item "> 
     <a href="/contact-val"> 
      <p>Want to Volunteer</p> 
     </a> 
    </div> 
    <div class="action-item "> 
     <a href="http://valapplewhite.nationbuilder.com/pledge_to_vote"> 
      <p>Pledge to Vote for Val</p> 
     </a> 
     </div> 

    <div class="action-item action-item-contribute"> 
     <a href="https://valapplewhite.nationbuilder.com/donate"> 
      <p>Make a Contribution</p> 
     </a> 

只是改變ul and li to Div

CSS

.action-item { 
    background-color:#1b365b; 
    text-align:center; 
    margin-bottom:20px; 
    padding:2px 0 
} 
.action-item a { 
    display:block; 
    border:solid 3px #00aeef; 
    margin:15px; 
    padding:20px 10px 10px 10px; 
    text-decoration:none 

} 
.action-item a:hover { 
    background-color:#21426f 
} 
.action-item p { 
    color:#fff; 
    text-transform:uppercase; 
    font-family:"adobe-caslon-pro", serif; 
    font-size:23px; 
    line-height:28px; 
    margin-bottom:10 
} 
.action-item.action-item-contribute { 
    background-color:#8f1940 
} 
.action-item.action-item-contribute a { 
    border:solid 3px #db336a 
} 
.action-item.action-item-contribute a:hover { 
    background-color:#a51d4a 
} 
@media(max-width:960px) { 
    .action-item p { 
     font-size:18px; 
     line-height:23px 
    } 
} 

Working Fiddle

Answer 3

你也可以試試這個：

演示http://jsfiddle.net/tPqS8/

HTML

<a href="http://designshack.net/" class="action-item">Want to Voluneer</a> 

CSS

.action-item { 
    display: block; 
    background-color: #1b365b; 
    border: 2px solid #00aeef; 
    outline: #1b365b solid 6px; 
    text-align:center; 
    color: #fff; 
    text-decoration: none; 
    text-transform:uppercase; 
    font-family:"adobe-caslon-pro",serif; 
    font-size: 20px; 
    line-height: 3.5; 
    height: 70px; 
    width: 300px; 
}