Próbuję odtworzyć JavaScript "Clock Clock", znaleziony tutaj: https://codepen.io / CodestitedConcepts / PEN / BWGXRQ

Jestem blisko, bardzo blisko, ale nie byłem w stanie zdobyć znaczniki rozpiętości, by usiąść w górę blisko moich elementów selektorowych, takich jak w przykładzie.

W celu wizualnego mojego celu, sprawdź, że link IMGUR: https://imgur.com/a/jqafd8s.

Próbowałem kilku fragmentów kodów z wokół stackoverflow, dokładna natura mojego celu jest trudna do opisania w wyjątkowej angielskiej frazie, więc znajduję wyniki dla osób, które chcą robić podobne, ale różne rzeczy. Chcę tylko przestrzeń między tekstem "Ustaw czas budzenia", a selektor nie będzie prawie nic.

Oto niektóre z moich HTML i CSS: CSS, w tym dwie opcje, które przynajmniej dostać elementy rozpiętości i selektora na tę samą linię (coś, z którym walczyłem przez godzinę)

.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>

Wiem, że można to zrobić, ponieważ robią to w przykładzie, który połączyłem na górze strony. Ale nie mogę zrozumieć, jak to się robi w tym kodeku. Próbowałem kopiować liczne kawałki CSS z jednego miejsca do drugiego, nic nie działa. Ktoś to przeliteruje, proszę?

Dzięki za pomoc wszystkim! Jest to dosłownie drugi do ostatniego kawałka układanki.

3
Roly Poly 18 styczeń 2020, 05:31

1 odpowiedź

Najlepsza odpowiedź

Nie sądzę, żebyś zrozumiał pomysł "kontenerów i flex" wystarczająco dobrze, chcesz przenieść pojemnik, który trzyma Elemetns razem do centrum (jeśli rozumiem swoje wymagania), ale dodasz CSS do elementu w pojemniku To jest złe, twoim celem powinien być przesuwanie pojemnika, który posiada zarówno tytuł, jak i zegar do centrum, co oznacza "główny" div. Dodaj CSS do głównego i voila.

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

.timer {

}

.main{
  display:flex;
  justify-content: center;
}
1
Anjula S. 18 styczeń 2020, 07:04