在彼此之上堆叠2个单词

我在一个圆形的提交按钮中有两个单词，我想堆叠在彼此的顶部而不是并排。我尝试过“自动换行：分词”，但是这种编码是宽度和高度的偶然。在彼此之上堆叠2个单词

我宁愿不为创建提交按钮的图像，因为我确信有一种方法可以用CSS实现。感谢您的任何帮助！

这是一个邮件黑猩猩注册的形式

HTML

<div class="clear"><input type="submit" value="Get It!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

CSS

.button { 
    font-family: 'Lobster', Helvetica Neue, Helvetica, Arial, sans-serif; 
    text-shadow: 1px 1px #000; 
    font-size: 1.8em; 
    letter-spacing: .03em; 
    color: #fff; 
    background-color: #f8a8a1; 
    border: 2px solid #f8a8a1; 
    padding: 0em 0.3em; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 50px; 
    display: inline-block; 
    margin: 0; 
    height:74px; 
    width:74px; 
    word-wrap:break-word; 
    position: absolute; 
    margin: -1em 0em; 
    line-height:1em; 
}

来源

2015-09-09 greatwanderer

让我看看你的CSS和HTML – Siyah

你可以在它使用br标签：JS Fiddle

<button>Stack<br>words</button>

来源

2015-09-09 13:53:42

他要求的CSS的修复，而不是HTML。 – Siyah

HTML

<button class="myButton"> 
    <p class="word-one">TopWord</p> 
    <p class="word-two">BottomWord</p> 
</button>

CSS

.myButton{ 
    position:relative; 
    width:50px; /*whatever dimensions you want*/ 
    height:50px; 
} 

.word-one{ 
    position:absolute; 
    top:0px; 
    left:10px; 
} 

.word-two{ 
    position:absolute; 
    top:20px; 
    left:10px; 
}

来源

2015-09-09 14:02:54 coozin

如果你需要使用CSS在HTML，不希望它是宽度&高度队伍，我能想到的唯一办法这样做是使用:before和:after伪元素。

有一件事情我也不太清楚的是如何中心的元素，所以你必须围绕一个位

#submit { 
 
    height: 50px; 
 
    width: 250px; 
 
    position: relative; 
 
} 
 

 
#submit:before { 
 
    content: "Top Row"; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#submit:after { 
 
    content: "Bottom Row"; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<button id="submit"></button>

来源

2015-09-09 14:03:27 Adjit

设置word-spacing等于容器的宽度玩会为你做这个。

button { 
    font-size: 1em; 
    width: 200px; 
    word-spacing: 200px;   
}

http://jsfiddle.net/x2y4m78k/

来源

2015-09-09 14:05:14

我试过这种方法，但没有奏效。但是，我可以通过增加字体大小和调整文本的填充来使其工作。谢谢！ – greatwanderer

当我添加“字间距”时，它没有堆叠这两个单词，而只是增加了两个单词之间的空间。我想这个例子中容器比按钮宽度大得多。 – greatwanderer

@greatwanderer当我说容器时，我指的是文本容器，在我的例子中是按钮。将字距设置为等于按钮的宽度。发布您的HTML和CSS。 –

在彼此之上堆叠2个单词

回答

相关问题