0

嗨，所以我有这个：

    #header
    {
    width: 90%;
    height: auto;
    margin: 0 auto 3% auto;
    border-bottom: 1px solid black;
    }

    #header p, h1
    {
    display: inline;
    }
    #header p
    {
    font-style: italic;
    }

    h1
    {   
    width: 40%;
    border-right: 2px solid black;
    font-family: Franklin Gothic Medium;
    text-transform: uppercase;
    font-size: 2.8em;
    margin-left: 2%;
    text-shadow: 0px 0px 2px white;
    }

和 HTML

    <div id="header">
    <h1>Heading Blog Title</h1>
    <p>Site description Site description Site description Site description</p></div>

它看起来像这样：http: //i.imgur.com/TvVKjo9.jpg

但我想保持 h1 的宽度也像这样：http: //i.imgur.com/YzWO8YN.jpg 基本上居中

连同 h1 标签。图1是我用的

    #header p, h1
    {
    display: inline;
    }

对彼此而言。在第二张图片中，h1 标签的位置是我想要的，但是

搞砸了。在第二张图片中，我使用了 display: inline-block; 对于 h1。并且 p 描述未定位在中心位置，我可以使用边距 pr 填充，但其余描述继续低于 h1 标签，如您在图 2 上所见。我通过相对定位和边距 p 标签修复了这个问题，但它在更高或更小的分辨率下低于或高于#header，因为我使用了 %. 有什么技巧可以解决这个问题吗？谢谢

4

1 回答 1

0

这是上面的jsFiddle ...

和一种解决方案

  • 获取 h1 和 p 以显示 inline-block: #header p, h1 { display: inline-block; }
  • 将两个元素都向左浮动，并给出#header p小于 60% 的宽度
  • 由于浮动会从自然文档流中删除元素，因此您需要为 div 容器设置一个固定高度，以便它仍然包含标题。
  • 添加所需的边距以使p元素位于正确的位置。

注意：这不适用于较小的屏幕尺寸，因为当h1文本宽度超过 40% 时，文本会伸出它的容器。我建议你给 h1 元素一个min-width你满意的固定宽度（或），然后让它#header p浮动到它的左边。

于 2013-06-04T09:36:31.367 回答