Question

我试图排队标题和子标题;我的想法是使用text-align: justify;，但它没有用。我的猜测是因为父级设置为inline-block？

的jsfiddle： http://jsfiddle.net/9bnqab6n/1/

HTML：

<div id="header">
    <div id="logo">
        <h1 class="logo">My Business</h1>
        <h3 class="logo">This Is What We Do</h3>
    </div>
</div>

CSS：

h1, h3 {
    margin: 0;
    padding: 0;
    text-align: justify;
}
h1 {
    font-family: Arial;
    font-size: 1.75em;
}
h3 {
    font-family: Georgia;
    font-size: 1em;
}
.logo {
    text-align: justify;
}

Answer 1

不幸的是，text-align:justify并不适用于单行文字;它适用于段落。您需要像.logo:after那样设置样式：

＆＃13;

h1, h3 {
    margin: 0;
    padding: 0;
    text-align: justify;
}

h1 {
    font-family: Arial;
    font-size: 1.75em;
}

h3 {
    font-family: Georgia;
    font-size: 1em;
}
.logo{
  text-align: justify;
}
.logo:after{
  content: "";
  display: inline-block;
  width: 100%;
}

＆＃13;

<div id="header">
    <div id="logo">
        <h1 class="logo">My Business</h1>
        <h3 class="logo">This Is What We Do</h3>
    </div>
</div>

＆＃13;

Answer 2

在你的css文件中更改：

.logo {
    text-align: justify;
}

到此：

.logo {
    display: inline;
}

如何排队一个标题＆amp;子报头

2 个答案: