Computer >> Máy Tính >  >> Lập trình >> CSS

Đặt các mục linh hoạt theo chiều dọc bằng CSS

Để đặt các mục linh hoạt theo chiều dọc, hãy sử dụng hướng uốn cong bất động sản. Bạn có thể thử chạy mã sau để hiển thị các mục linh hoạt theo chiều dọc

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            flex-direction: column;
            background-color: orange;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</div>
      </div>
   </body>
</html>