对齐文本标题

我想对齐文本像<h4>2004th</h4>标题上方的顶部..对齐文本标题

我的代码不工作：

.chronicle { 
 
    top: 0; 
 
} 
 
.chronicle h5, 
 
.chronicle h4, 
 
.chronicle h3, 
 
.chronicle h2, 
 
.chronicle h1 { 
 
    margin: 0 10px 10px 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
}

<div class="chronicle"> 
 
    <h1>2003</h1> 
 
    Lorem ipsum dolor sit amet, consectetur adilorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate reiciendis, deserunt velit veniam quidem itaque dolore dolorum, culpa aliquam similique neque voluptatibus. Porro vitae soluta cupiditate 
 
    officia sunt, ipsa aliquam! pisicing elit. Officiis quis, architecto praesentium. Repellat voluptatibus sint tenetur illum quos cumque dicta omnis quis impedit dolores, sit est placeat maxime. Est, earum. 
 
</div>

来源

2016-10-07 tonymx227

首先，你的方法，需要修改轻微。但是，如果你想继续这样做，那么把'vertical-align：top; display：inline;'添加到'.chronicle'类。它将Lorem Ipsum放在最上面。 –

添加display: inline-block和float:left的标题

.chronicle { 
 
    top: 0; 
 
} 
 
.chronicle h5, 
 
.chronicle h4, 
 
.chronicle h3, 
 
.chronicle h2, 
 
.chronicle h1 { 
 
    margin: 0 10px 10px 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
    float:left; 
 
}

<div class="chronicle"> 
 
    <h1>2003</h1> 
 
    Lorem ipsum dolor sit amet, consectetur adilorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate reiciendis, deserunt velit veniam quidem itaque dolore dolorum, culpa aliquam similique neque voluptatibus. Porro vitae soluta cupiditate 
 
    officia sunt, ipsa aliquam! pisicing elit. Officiis quis, architecto praesentium. Repellat voluptatibus sint tenetur illum quos cumque dicta omnis quis impedit dolores, sit est placeat maxime. Est, earum. 
 
</div>

来源

2016-10-07 07:55:11

如果我找到你的话，请使用vertical-align:top来对齐你的inline-block。

.chronicle { 
 
    top: 0; 
 
} 
 
.chronicle h5, 
 
.chronicle h4, 
 
.chronicle h3, 
 
.chronicle h2, 
 
.chronicle h1 { 
 
    margin: 0 10px 10px 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div class="chronicle"> 
 
    <h1>2003</h1> 
 
    Lorem ipsum dolor sit amet, consectetur adilorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate reiciendis, deserunt velit veniam quidem itaque dolore dolorum, culpa aliquam similique neque voluptatibus. Porro vitae soluta cupiditate 
 
    officia sunt, ipsa aliquam! pisicing elit. Officiis quis, architecto praesentium. Repellat voluptatibus sint tenetur illum quos cumque dicta omnis quis impedit dolores, sit est placeat maxime. Est, earum. 
 
</div>

或者，如果你的意思是对准像sup所有文字顶部为您h1，您需要使用

.chronicle { 
 
    top: 0; 
 
} 
 
.chronicle h5, 
 
.chronicle h4, 
 
.chronicle h3, 
 
.chronicle h2, 
 
.chronicle h1 { 
 
    margin: 0 10px 10px 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
sup { 
 
    font-size: 12px; 
 
}

<div class="chronicle"> 
 
    <h1>2003 <sup> Lorem ipsum dolsit est placeat maxime. Est, earum.</sup></h1> 
 
</div>

或者，如果你想你的h1不是浮动文字，你需要t o从中删除display: inline-block。

的问题是非常不清楚:)

来源

2016-10-07 07:53:12

好的回答。 –

你的意思是你只想使用<sup>test</sup>。如果你想要特别的设计，你也可以设计它。

<div class="chronicles"><sup>2000th</sup> Lorem ipsum dolor sit amet.</div>

来源

2016-10-07 07:54:13

如果我用'sup'替换标题，它不会在我的代码片段中工作......'sup'不会与文本的顶部对齐。 – tonymx227

.chronicle { 
 
    top: 0; 
 
} 
 
.chronicle h5, 
 
.chronicle h4, 
 
.chronicle h3, 
 
.chronicle h2, 
 
.chronicle h1 { 
 
    margin: 0 10px 10px 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 
.title-text{ 
 
vertical-align: top; 
 
}

<div class="chronicle"> 
 
    <h1>2003</h1> 
 
<span class="title-text"> Lorem ipsum dolor sit amet, consectetur adilorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate reiciendis, deserunt velit veniam quidem itaque dolore dolorum, culpa aliquam similique neque voluptatibus. Porro vitae soluta cupiditate 
 
    officia sunt, ipsa aliquam! pisicing elit. Officiis quis, architecto praesentium. Repellat voluptatibus sint tenetur illum quos cumque dicta omnis quis impedit dolores, sit est placeat maxime. Est, earum.</span> 
 
</div>

来源

2016-10-07 07:56:29

第一行是确定的，但它不适用于其他行...... – tonymx227

你可以做同样的是这样的：

.chronicle h5, 
 
.chronicle h4, 
 
.chronicle h3, 
 
.chronicle h2, 
 
.chronicle h1 { 
 
    margin: 0 0px 10px 0; 
 
    padding: 0; 
 
} 
 
.chronicle > h1 { 
 
    display: inline-block; 
 
} 
 
.chronicle > span { 
 
font-size: 20px; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    line-height: 50px; 
 
}

<div class="chronicle"> 
 
    <h1>2003</h1><span>th</span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adilorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate reiciendis, deserunt velit veniam quidem itaque dolore dolorum, culpa aliquam similique neque voluptatibus. Porro vitae soluta cupiditate 
 
    officia sunt, ipsa aliquam! pisicing elit. Officiis quis, architecto praesentium. Repellat voluptatibus sint tenetur illum quos cumque dicta omnis quis impedit dolores, sit est placeat maxime. Est, earum.</p> 
 
</div>

来源

2016-10-07 09:17:21

对齐文本标题

回答

相关问题