使用 CSS 看起来像按钮的标签答案

【问题标题】：a tag that looks like a button using CSS使用 CSS 看起来像按钮的标签
【发布时间】：2013-07-29 08:48:06
【问题描述】：

我制作了以下 CSS 类：

.mine-button { 大纲：0；背景颜色：RGB（153,153,153）；边距：0 4px 100px 0；填充：0 1em；颜色：RGB（255,255,0）；高度：2em；文字装饰：无！重要；光标：指针；位置：相对；文本对齐：居中；垂直对齐：中间； -moz-边界半径：15px； -webkit-border-radius：15px；浮动：对； }

然后我在 HTML 文件中添加了以下内容：

了解详情

但这就是我得到的：

有2个问题：
1。 “自述”未在“按钮”中间垂直对齐
2。尽管上面类中的 margin-bottom 设置为 100px，但“按钮”位于文本的黄色边框之上！

【问题讨论】：

我不确定你是否可以控制它，但黑色背景上的黄色文字非常接近于犯下设计师仇恨犯罪。
a 元素被呈现为内联块，这意味着它将围绕其内容折叠。尝试在您的链接周围使用div。请为此块添加完整的 html 和 css。
appearance:button; ...
一个元素是内联元素
在浮动元素上定义边距时表现不同，请阅读此处：stackoverflow.com/questions/4631765/…

标签： css

【解决方案1】：

试试

line-height:30px;

在css中

【讨论】：

【解决方案2】：

尝试添加：

.mine-button {
  position: relative;  
  line-height: 2em;
}

为 line-height 指定与 height 相同的值将使内容垂直对齐。

.mine-button 位置问题可能来自父元素（高度、最大高度等）或来自前一个元素，我猜是<p>。您能否提供一个完整的示例以获得更准确的答案。

谢谢。

【讨论】：

【解决方案3】：

您正在使用height: 2em，我添加了padding-top: 0.3em 并将高度降低到height: 1.7em，它使文本居中。

这里是Fiddle。

添加margin-bottom: 10px 将其移动到黄线中。

【讨论】：

【解决方案4】：

将您的 a 标签更改为

<a class='mine-button'><span>Read more</span></a>

并使用 'flexbox' 来解决您对边距的不当使用和垂直对齐问题。

.mine-button { 
    outline: 0;
    background-color:rgb(153,153,153);
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly 
                                 works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display:flex;
    align-items:center;
    justify-content :center;
    height:30px;
    width:100px;
    color:rgb(255,255,0);
    text-decoration: none !important; 
    cursor: pointer; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;  
}

【讨论】：

【解决方案5】：

尝试添加

display: block;

规则

【讨论】：

一个有浮动的元素，已经表现得就像有一个显示：块；在上面。这就是为什么它不起作用

【解决方案6】：

尝试将padding-top:5px; 添加到您的CSS。

【讨论】：

【解决方案7】：

这个看起来更好。看看这个：我认为高度和填充不稳定。这应该可以。

.mine-button {
  background-color: rgb(153,153,153); /* Green */
  border: none;
  color:yellow;
  border-radius:15px;
  padding:1em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
   cursor: pointer; 
  font-size: 16px;
  float :right;
}

第二个问题，您可能想查看 CSS 中的 position 标签并手动设置 left and right。那就是我会做的。也许还有另一种现代的方式，但我只是走传统的。希望对您有所帮助，干杯！！！

【讨论】：