Question

以下是我要做的事情：我有一个<h1>元素，一个<time>元素和一个<div>，所有这些元素都在<header>内浏览器窗口的宽度。 <h1>元素需要位于左侧，<time>元素随时间变化宽度，需要居中，<div>需要位于右侧。

我一直试图解决这个问题，但没有运气。也许它需要一些JavaScript？我还需要能够（我认为使用绝对定位？）垂直居中对齐它们，它们都是不同的字体大小。

到目前为止，这是HTML：

<header>
    <h1>blahblah.com</h1>
    <time>THE TIME</time>
    <div id="controls">
        DISPLAY CONTROLS
    </div>
</header>

和CSS：

* {
    margin: 0px;
    padding: 0px;
}
header {
    background: black;
    color: white;
    width: 100%;
    font-family: wendy;
}
header h1 {
    display: inline-block;
    font-size: 40px;
    margin-left: 10px;
}
header time {
    font-size: 30px;
}
header #controls {
    display: inline-block;
}
#controls p {
    display: inline-block;
    font-size: 20px;
}

非常感谢！

Answer 1

Time是一个内联元素，因此标题的text-align: center足以让时间居中。此外，摆脱那些不必要的inline-block样式。

然后基本对齐样式表缩小为this fiddle example：

header { 
    width: 100%; 
    overflow: hidden;
    text-align: center;
} 
header h1 { 
    float: left;
} 
header #controls { 
    float: right;    
}

添加溢出以确保将标题的高度扩展到浮动元素的高度，以最高者为准。

我试图在左侧，右侧和中心对齐三个元素。中心元素=动态宽度，包含元素=浏览器的宽度

1 个答案: