简体   繁体   English

在div左右两侧的div之间添加文本

[英]Add text between divs that are on the left and right side of a div

Jsfiddle Example Jsfiddle示例

HTML HTML

<div class = "container">
    Text Here = <div class = "plus">+</div> Text Also Here <div class = "minus">-</div>
</div>

CSS CSS

.container {
    position: absolute;
    float: left;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    background-color: #FFFF00;
    opacity: 1;
    width: 400px;
    height: 500px;
    text-align: center;
}
.plus {
    width: 20px;
    height: 20px;
    background-color: #FF00FF;
    text-align: center;
}
.minus {
    width: 20px;
    height: 20px;
    background-color: #FF00FF;
    text-align: center;
}

I want to format my text with some divs in between, something along the lines of this 我想用一些div来格式化我的文本,与此类似

Text Text 文字文字

However, when I try to make this work it ends up as 但是,当我尝试进行此工作时,它最终会变成

text (Plus Div) Text (Minus Div) 文字(加分)文字(减分)

which is not what I want. 这不是我想要的。

Use span instead of div like this: 使用span而不是div像这样:

<div class = "container">
    Text Here = <span class = "plus">+</span> Text Also Here <span class = "minus">-</span>
</div>

Jsfiddle: http://jsfiddle.net/AndrewL32/qgpm3r81/3/ Jsfiddle: http : //jsfiddle.net/AndrewL32/qgpm3r81/3/

HTML HTML

<div class="container">
    <div>Text Here =</div>
    <div class="plus">+</div>
    <div>Text Also Here</div>
    <div class="minus">-</div>
</div>

CSS CSS

.container {
    display: flex;
    justify-content: flex-start;    
    background-color: #FFFF00;
    width: 400px;
    height: 500px;
}

.container > div {
    margin: 5px;    
}

.plus {
    width: 20px;
    height: 20px;
    background-color: #FF00FF;
    text-align: center;
}
.minus {
    width: 20px;
    height: 20px;
    background-color: #FF00FF;
    text-align: center;
}

DEMO: http://jsfiddle.net/qgpm3r81/5/ 演示: http : //jsfiddle.net/qgpm3r81/5/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM