1

我忙于 HTML 和 CSS 并被困住了。我创建了一个带有 :hover 和 :active 选项的按钮，它位于页面的中心。单击此按钮需要指向一个网站。

我的 HTML 是：

<div>
<a href="website"><div id="button">Text</div></a>
</div>

CSS是：

body, html {
  height: 100%;
}
a {
    text-decoration: none;
}
#button {
    text-transform: uppercase;
    font-size: 18px;
    text-align: center;
    padding: 1em 0.5em 0.8em;
    background-color: white;
    font-family: Myriad Pro, Source Sans Pro, Helvetica, Arial, sans-serif;
    color: #ff4700;
    cursor: pointer;
    width: 150px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ff4700;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}

#button:hover {
   background-color: #ff4700;
   color: white;
   border: 1px solid white; 
}

#button:active {
    background-color: #cc3900;
    }

问题在于页面的整个宽度在按钮的高度处是可点击的，而不仅仅是按钮本身是 150px 宽并且在页面上居中。

我想我的 div 混淆了，它需要其他格式和优先级，但我不确定。谢谢你的帮助！

PS 第一次在 StackOverflow 上，如果我的格式有误，请见谅。编辑：PPS 谢谢大家的反应，没想到这么多人会花时间提供帮助！有几种方法有效，但这是最容易合并的。

<div>
<a href="website" style="display:block" id="button">Text</a>
</div>

再次，谢谢！

4

6 回答 6

1

margin: auto;将and添加display:block;到a而不是button.

请参阅此JSFiddle。

于 2013-11-06T21:43:50.403 回答
1

现场演示

这在 Chrome 和 FireFox 中会发生，但在 Opera 中不会，因为<a>元素的渲染。如果您将显示更改为atodisplay:inline-block;并放置text-align:center;到 parent <div>，它将起作用。

于 2013-11-06T21:44:01.257 回答
1

这有帮助吗。

<div>
<a href="website" style="display:block" id="button">Text</a>
</div>

而不是将链接包裹在块周围，而是使链接成为块。

于 2013-11-06T21:44:19.600 回答
0 
<div>
<div id="button"><a href="website">Text</a></div>
</div>
于 2013-11-06T21:45:03.470 回答
0 
<div>
<a href="website" id="button">TEXT</a>
</div>

然后使用你的 CSS 将 div 居中。这应该有帮助！

于 2013-11-06T21:45:18.067 回答
0

我会重新订购 HTML 并稍微更改 CSS。把<a>里面的<div>。根据您的口味添加新课程和风格。

示例：http: //jsfiddle.net/6tzb6/

HTML

<div>
<div id="button"><a href="website.com">Text</a></div>
</div>

CSS 

#button a {width:150px;height:100px;display:block;}
于 2013-11-06T21:48:18.687 回答