在宽度为 100% - 60px 的 div 中对齐文本
Justify text in a div with width 100% - 60px
我有一个
#menu {
width: calc(100vw - 60px);
left: 30px;
}
可用space的话怎么说得过去?
我正在尝试
text-align:justify
但是没用。
我假设你指的是文字。这是因为 text-align: justify
没有对齐文本块的最后一行。一种解决方法是添加一个 css 生成的内容项,它的作用类似于内联文本项,但像这样拉伸容器的整个宽度:
#menu:after {
content: '';
display:inline-block;
width: 100%;
}
#menu{
font-family: Arial;
font-size:22px;
width: calc(100vw - 60px);
left: 30px;
text-align: justify;
text-justify: inter-word;
position:fixed;
}
#menu:after {
content: '';
display:inline-block;
width: 100%;
}
<div id="menu">
SS17 FW16/17 ABOUT STOCKISTS
</div>
你的意思是这样的吗?
此解决方案使用 display: flex
并且它是 属性 justify-content: space-between;
阅读更多关于 flexbox 的内容 here
#menu {
display: flex;
font-family: Arial;
font-size: 22px;
width: calc(100vw - 60px);
left: 30px;
text-align: justify;
text-justify: inter-word;
position: fixed;
justify-content: space-between;
}
<div id="menu">
<span>SS17</span><span>FW16/17</span><span>ABOUT</span><span>STOCKISTS</span>
</div>
我有一个
#menu {
width: calc(100vw - 60px);
left: 30px;
}
可用space的话怎么说得过去?
我正在尝试
text-align:justify
但是没用。
我假设你指的是文字。这是因为 text-align: justify
没有对齐文本块的最后一行。一种解决方法是添加一个 css 生成的内容项,它的作用类似于内联文本项,但像这样拉伸容器的整个宽度:
#menu:after {
content: '';
display:inline-block;
width: 100%;
}
#menu{
font-family: Arial;
font-size:22px;
width: calc(100vw - 60px);
left: 30px;
text-align: justify;
text-justify: inter-word;
position:fixed;
}
#menu:after {
content: '';
display:inline-block;
width: 100%;
}
<div id="menu">
SS17 FW16/17 ABOUT STOCKISTS
</div>
你的意思是这样的吗?
此解决方案使用 display: flex
并且它是 属性 justify-content: space-between;
阅读更多关于 flexbox 的内容 here
#menu {
display: flex;
font-family: Arial;
font-size: 22px;
width: calc(100vw - 60px);
left: 30px;
text-align: justify;
text-justify: inter-word;
position: fixed;
justify-content: space-between;
}
<div id="menu">
<span>SS17</span><span>FW16/17</span><span>ABOUT</span><span>STOCKISTS</span>
</div>