html - 如何使用 CSS 将这些 span 标签移动到靠近我的选择器元素的位置？

Question

我正在尝试重新创建一个 JavaScript“LOLCAT 时钟”，可在此处找到:https://codepen.io/codifiedconcepts/pen/bwgxRq

我已经很接近了，非常接近了，但是我无法让我的 span 标签像示例中那样靠近我的选择器元素。

要直观地了解我的目标，请查看此 Imgur 链接:https://imgur.com/a/jQafd8S

我已经尝试了一些来自 StackOverflow 的代码片段，我的目标的确切性质很难用一个独特的英语短语来描述，所以我正在为那些想要做类似但不同的事情的人寻找结果。我只希望文本“SET WAKE UP TIME”和选择器之间的空间几乎为空。

这是我的一些 HTML 和 CSS:css，包括至少将跨度和选择器元素放在同一行的两个选项(我为此苦苦挣扎了一个小时)

.timer-text {
	font-family: "Lucida Console", Monaco, monospace;
	text-align: center;
}

.timer {
    /* OPTION 1: */
	/* padding: 5px;
	overflow: hidden;
	width: 90%;
	display: flex;
	align-items: flex-start; */
    /* OPTION 2: */
	display: flex;
	align-items: center;
}

<div class="main">
	<div class="timer">
		<span class="timer-text">SET WAKE UP TIME</span>
		<select id="wakeupTimer">
			<option value="1">1 AM - 2AM</option>
			<option value="2">2 AM - 3AM</option>
			<!-- and so on and so forth from 1 am to 12 am -->
			<option value="24">12 AM - 1AM</option>
		</select>
	</div>
</div>

我知道这是可以做到的，因为他们在我链接在页面顶部的示例中做到了这一点。但我无法弄清楚它是如何在那个 Codepen 中完成的。我试过将许多 CSS 片段从一个地方复制到另一个地方，但没有任何效果。有人帮我拼出来吗？

感谢大家的帮助!这实际上是拼图的倒数第二 block 。

Answer 1

我认为您对“Container and Flex”的理解不够好，您想将容纳元素的容器移动到中心(如果我理解您的要求正确的话)但是您正在将 CSS 添加到元素在容器内，这是错误的，您的目标应该是将包含您的标题和计时器的容器移动到中心，即“主”div。将 css 添加到 main 和 voila 。

.timer-text {
    font-family: "Lucida Console", Monaco, monospace;
    text-align: center;
}

.timer {

}

.main{
  display:flex;
  justify-content: center;
}