Question

HY，所以我有这个：

    #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描述不是位于中心位置，我可以使用margin pr padding但是其他描述仍然在h1标签下面，如图2所示。我通过p标签的相对定位和边距来修复它，但它在更高或更小分辨率下低于或高于#header，因为我使用了％。解决这个问题的任何技巧？感谢

Answer 1

Here's a jsFiddle of the above...

one solution

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

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

h1和p标记在同一行，但保持h1宽度

1 个答案: