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

Posted 2023-05-09

【中文标题】使用 CSS 看起来像按钮的标签

【英文标题】：a tag that looks like a button using 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; ...

一个元素是内联元素

在浮动元素上定义边距时表现不同，请阅读此处：***.com/questions/4631765/…

【参考方案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。那就是我会做的。也许还有另一种现代的方式，但我只是走传统的。希望对您有所帮助，干杯！！！