• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

ustawianie divów w 1 lini

VPS Starter Arubacloud
0 głosów
487 wizyt
pytanie zadane 27 lutego 2020 w HTML i CSS przez What_RU_Doing Początkujący (310 p.)
Sytuacja wygląda tak: wewnątrz mojego diva (tutaj menu) stworzyłem kolejne divy (klasę: option). Nie wiem jak ustawić te divy w jednej linii poziomej. Divy automatycznie układają się pod siebie. Próbowałem z float: left, ale także nie działało. Jeśli ktoś ma jakiś pomysł może pisać w odpowiedzi. Poniżej wstawiam kod html i css.

<!DOCTYPE HTML5>
<html lang="pl">
 <head>
    <meta charset="UTF-8"/>
    <title> Windows :) </title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <div id="container">
     <div id="logo">
     <h1>Wszystko o Windowsie!</h1>
     </div>
     <div id="menu">
     <td><tr>
      <div class="opton">Windows</div>
      <div class="opton">Microsoft</div>
      <div class="opton">Bill Gates</div>
      <div class="opton">O mnie</div>
     </div>
     <div id="sidebar">
     </div>
     <div id="content">
     </div>
     <div id="ad">
     </div>
     <div id="footer">
     </div>
    </div>
  </body>
</html>

Tu css (jeszcze nie dokończony)

body
{
    background-color: rgb(10,10,10);
}
#container
{
    width: 70%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#logo
{
    background-color: rgb(255,255,255);
    color: black;
    height: 10%;
    text-align: center;
}

#menu
{
    background-color: #F36742;
    margin-top: 20px;
    width: 100%;
    height: 5%;
}

#sidebar
{
    
    
}

#content
{
    
    
}

#ad
{
    
    
}

#footer
{
    
    
}

.option
{
    
}

2 odpowiedzi

0 głosów
odpowiedź 27 lutego 2020 przez What_RU_Doing Początkujący (310 p.)
zauważyłem że zostawiłem w kodzie znaczniki <tr> i <td>  bez nich divy też nie ustawiają się poprawinie.
0 głosów
odpowiedź 28 lutego 2020 przez grineee Bywalec (2,270 p.)

przede wszystkim wrzucaj kod w codeboxa

a co do problemu, to spróbuj pokombinować z display:flex, np.:

#menu
{
display: flex;
flex-direction: row;
}

przy okazji tutaj:

<div class="opton">Windows</div>
      <div class="opton">Microsoft</div>
      <div class="opton">Bill Gates</div>
      <div class="opton">O mnie</div>

 

masz literówkę :)

Tutaj możesz dowiedzieć się więcej:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

komentarz 29 lutego 2020 przez What_RU_Doing Początkujący (310 p.)
Ok. Dzięki :)

Podobne pytania

0 głosów
2 odpowiedzi 635 wizyt
pytanie zadane 17 lipca 2017 w HTML i CSS przez leemish Użytkownik (780 p.)
0 głosów
1 odpowiedź 434 wizyt
pytanie zadane 25 lipca 2019 w HTML i CSS przez MAXIM7 Obywatel (1,990 p.)
0 głosów
1 odpowiedź 1,638 wizyt
pytanie zadane 18 kwietnia 2018 w HTML i CSS przez Kacper Borszcz Początkujący (260 p.)

92,843 zapytań

141,782 odpowiedzi

320,858 komentarzy

62,174 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...