Working Fiddle

Question

我试图在不使用ul或li的情况下设计它，我该怎么办？或者任何有用的资源？

我需要它只是通过

来调用

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

Answer 1

你也可以试试这个：

demo 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;
}

Answer 2

嘿，这样的事可能会有所帮助吗？

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

Answer 3

<强> 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
    }
}

无法使这个CSS按钮工作

3 个答案:

Working Fiddle