ustawianie divów w 1 lini

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

odpowiedź 27 lutego 2020 przez What_RU_Doing Początkujący (310 p.)

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/