4

在登录/注册框中,我必须用这样的文本分隔两个按钮。

登录/注册框

我的 HTML 代码是:

<button class="facebookSux">Ingresa con Facebook</button>
<label>o si prefieres</label>
<button class="register">Regístrate con tus datos</button>

如何仅使用 CSS 获得标签的水平线?

我考虑过的一种解决方案是适当地使用线性渐变,但必须有一种更优雅的方式来实现这一点。

4

4 回答 4

3

您当然可以使用 2 个 div 和定位

演示

HTML

<div class="wrapper">
   <div class="line"></div>
   <div class="text">Hello</div>
</div>

CSS

.wrapper {
    margin: 30px;
    position: relative;
    width: 300px;
}

.line {
    height: 1px;
    background-color: #000000;
}

.text {
    background: #ffffff;
    display: inline-block;
    position: absolute;
    top: -15px;
    left: 128px;
    padding: 5px;
}
于 2012-12-12T15:54:18.713 回答
1

我假设这三个标签周围有一个容器也可以设置样式,在这种情况下,我提出了这个解决方案

截屏

标记(未更改):

<div>
    <button>Ingresa con Facebook</button>
    <label>o si prefieres</label>
    <button>Regístrate con tus datos</button>
</div>

样式表:

div {
    width: 250px;
    text-align: center;
    overflow: hidden;
}
button {
    width: 100%;
}
label {
    padding: 0 1em;
    position: relative;
}
label::before,
label::after {
    width: 125px; /* =250/2 */
    height: 0;
    border-top: 1px solid #000;
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 100%;
}
label::after {
    left: 100%;
}
于 2012-12-12T19:27:19.330 回答
0

您可以<hr />为此使用标签。可以将<hr />标签设置为一条黑线。通过使用 css,您可以将它们放置在正确的位置。

将标签样式设置<hr />为黑线:

hr {
        border: 1px; 
        height: 1px; 
        color: #000000;
        background-color: #000000;
}
于 2012-12-12T15:59:19.937 回答
0

使用这个:http: //jsfiddle.net/tErMn/

您只有动态文本定位和带有 css 的行。

诀窍在于display: inline-block;,margin: auto;z-index;

HTML

<div class="container">    
    <div class="text">Hello</div>
    <div class="line"></div>
</div>

CSS

.container{
    width: 300px;
    text-align: center;
}

.text{
    background-color: white;
    padding: 5px 20px;
    position: relative;
    z-index:1;
    margin: auto;
    display: inline-block;

}

.line {
    height: 1px;
    width: 100%;
    background-color: black;
    margin-top: -15px;
}
于 2012-12-12T16:33:57.020 回答