我正在尝试使用CSS中的display:flex;
创建一行元素,文本间距相同。
这是我得到的,我使用display: inline-block;
和文本之间的间距差异来实现它 - 我希望每个文本都能做同样的事情。
element {
border-width: 1px;
border-style: solid;
color: rgb(0, 146, 247);
display: inline-block;
height: 18px;
border-radius: 30px;
vertical-align: middle;
}
.footertext {
font-family: 'Open Sans', sans-serif;
color: rgb(124, 134, 205);
margin-left: 20px;
margin-right: 20px;
display: inline-block;
vertical-align: middle;
}

<div>
<p class="footertext">
First Line
</p>
<element></element>
<p class="footertext">
ABC
</p>
<element></element>
<p class="footertext">
Third Line
</p>
<element></element>
<p class="footertext">
DEFG
</p>
</div>
&#13;
我需要在文本之间使用那些有趣的元素,当我尝试使用display:flex;
这些元素超出范围时。
答案 0 :(得分:4)
flex怎么样,除了第一个元素之外的所有元素都有左边框:
div {
display: flex;
}
.footertext {
padding-left: 20px;
padding-right: 20px;
}
.footertext + .footertext {
border-left: 3px solid rgb(0, 146, 247);
}
* { box-sizing: border-box; }
/* non-essential decorative styles */
.footertext {
font-family: 'Open Sans', sans-serif;
color: rgb(124, 134, 205);
}
<div>
<p class="footertext">First Line</p>
<p class="footertext">ABC</p>
<p class="footertext">Third Line</p>
<p class="footertext">DEFG</p>
</div>
答案 1 :(得分:3)
这是一种简化的方法。
.footer-texts {
display: flex;
color:rgb(124,134,205);
font-family: sans-serif;
}
.footer-texts > span {
position: relative;
padding: .5rem 1rem;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
flex: 0 1 25%;
}
.footer-texts > span:not(:last-child)::after {
content: '';
position: absolute;
right: -2px;
top: 25%;
width: 2px;
height: 50%;
background-color:rgb(0, 146,247);
}
<div class="footer-texts">
<span>First Line</span>
<span>ABC</span>
<span>Third Line<br />two lines</span>
<span>DEFG</span>
</div>
一些注意事项:
.someClassName > span
向父项和样式添加一个类(其中someClassName
是类名,span
是子选择器。< / LI>
border-right
也是一个很好的候选人。答案 2 :(得分:0)
我理解你的问题(“间隔”)每个“文本块”应该具有相同宽度(?)的方式。为此,您可以使用固定宽度和text-align: center
(无边距):
element {
border-width: 1px;
border-style: solid;
color: rgb(0, 146, 247);
display: inline-block;
height: 18px;
border-radius: 30px;
vertical-align: middle;
}
.footertext {
font-family: 'Open Sans', sans-serif;
color: rgb(124, 134, 205);
display: inline-block;
text-align: center;
width: 100px;
}
<div>
<p class="footertext">
First Line
</p>
<element></element>
<p class="footertext">
ABC
</p>
<element></element>
<p class="footertext">
Third Line
</p>
<element></element>
<p class="footertext">
DEFG
</p>
</div>