0

Okay so I am currently using this for my <a> tags in HTML, and here is my css for it

#button {
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 5px;
  width: auto;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration:none;
  color: gray;
}
#button:hover {
  color: black;
}

But sadly the buttons are bigger then a standard line and just overlap eachother, for example: Here is some text [button] here is some more text [button]

Where the [button]s is beneath/ontop of the other it overlaps in the browser, (if that makes sense)

Here is a screenshot: screenshot

How can I make it so it creates a kind of area around it where it cant overlap and will push other elements outwards or so, margin seems to not work (top and bottom does nothing) and padding seems to make the 1px border bigger in height, thanks!

4

2 回答 2

1

添加显示：内联块；到您的按钮选择器，例如：

#button {
        border-style: solid;
        border-width: 1px;
        border-bottom-width: 5px;
        width: auto;
        padding-left: 2px;
        padding-right: 2px;
        text-decoration:none;
        color: gray;
        display:inline-block;
    }

顺便说一句，我建议按钮是一个类而不是一个 id，因为你不应该在同一页面上有多个具有相同 id 的元素。

于 2013-11-12T13:37:53.393 回答
0

您的示例中的行之间的距离太短，无法显示由边框包围的按钮文本，其空间适合该行。

所以我建议增加line-height默认文本的。

这里有一个例子：JSFiddle-Example

于 2013-11-12T13:52:13.703 回答