html - 如何使按钮标签展开?

标签 html css button stylesheet styling

我在设置这段 html 代码的样式时遇到了问题:

<div class="item-buttons">
    <a href="/some/url/with/value/1417">Sample button link</a>
    <button class="some-class some-status" value="1417">Button</button>
    <a href="/some/url/with/value/385">Other link</a>
</div>

根据下面的 CSS 规则,此代码将显示为带有按钮的框。用 <a> 表示的按钮<button> 标签将仅作为普通链接使用按钮有更复杂的行为,需要在它们的类属性和 value 中存储一些状态信息。属性。这就是为什么我不使用 <a>为他们标记。

这是应用于它们的 CSS:

.item-buttons {
position: absolute;
top: 5px;
right: 0px;
width: 130px;
}

.item-buttons a, .item-buttons button {
background: #eee;
color: #333;
text-decoration: none;
text-align: center;
display: block;
padding: 6px 8px;
margin-bottom: 5px;
border: 1px solid #ccc;
font-size: 12px;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
background: -moz-linear-gradient(top, #fff, #f5f5f5);
background: -o-linear-gradient(top, #fff, #f5f5f5);
background-color: #f5f5f5;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#.item-buttons a:hover, .item-buttons button:hover {
background: #a2e249;
color: #3d640e;
}

这里是 the whole example in JSFiddle .如您所见,<a><button>按钮看起来非常相似,除了 <button>那些不会扩展为 <a>是的。我希望它们都扩展。我试过几个 CSS 规则都无济于事。你能帮我解决这个问题并制作<button>吗?按钮展开?

最佳答案

.item-buttons a, .item-buttons button{width:100%; box-sizing:border-box;}

关于html - 如何使按钮标签展开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18057410/

相关文章:

javascript - 如何给输入区输入的标签加阴影?

swift - 这个语句在 Swift 中总是计算为 nil 吗?

javascript - Jquery animate backgroundColor 不工作

java - Play 2 框架 : scala iterate through fields of java objects in view

html - 我很难在其父 div 内垂直对齐 nav 元素。

C# 将焦点放在按钮上/使其处于事件状态

iphone - 在 iPhone 应用程序中添加 Facebook Like 按钮

html - div 的一个子元素可滚动到一个固定位置

javascript - 关闭事件 div 后滚动条不滚动

css - .NET MVC3 : Prevent 404 for missing CSS files? 或者在编写 HTML 之前确保文件存在?