gpt4 book ai didi

html - 如何阻止文本在

标签之外显示/流动?

转载 作者:太空宇宙 更新时间:2023-11-04 00:06:31 27 4
gpt4 key购买 nike

我不确定为什么,但我得到这个文本显示/流动在 <h3> 之外标签。我认为这与 float 有关,但我已经尝试了所有我知道的解决方案来修复它,但它们都没有奏效。

这是 jsfiddle(我在 Safari 中):http://jsfiddle.net/BJCkv/1/

HTML :

<div id="header-container">
<div class="wrapper"> <!-- has width of 940px; and aligned in middle -->
<h1>PCSA - TRAINING</h1>
<h3>Security Architecture</h3> <!-- This is the problem text -->
</div>
</div>

CSS:

#header-container {
height: 84px;
line-height: 84px;
background-color: #e0dfd9;
background-image: url(../img/header.png);
border-top: 1px solid #ccccc7;
border-bottom: 1px solid #ccccc7;
}
#header-container .wrapper {
overflow: hidden;
}
#header-container h1 {
color: #b8622b;
font-family: 'Open Sans', sans-serif;
font-size: 38px;
text-shadow: 0 1px 0 #f7f7f5;
font-weight: 600;
float: left;
background: red;
}
#header-container h3 {
color: #a5a5a4;
float: left;
font-family: 'Open Sans', sans-serif;
font-style: italic;
padding: 3px 0 3px 10px;
margin-left: 20px;
height: 30px;
border-left: 1px solid #a5a5a4;
background: yellow;
}

最佳答案

您可以将 replace height: 30px; 替换为 line-height: 30px; 这应该可以解决问题。 http://jsfiddle.net/BJCkv/7/

关于html - 如何阻止文本在 <h3> 标签之外显示/流动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14693051/

27 4 0