Sắp xếp 2 chữ trên cùng 1 dòng

Duc_Nguyen_Minh1 · September 23, 2021, 1:36pm

Em đang gặp vấn đề một chút ở chỗ WPR và MERN.

Thứ nhất là em đang gặp vấn đề ở chỗ là làm sao để 2 chữ WPR và MERN chung một dòng giống như hình nhưng lại ở hai vị trí như kia

Thứ hai là em không biết làm thế nào để tạo hình chữ mern được như hình, em làm nó hình như cái bánh gạo ấy, không tròn được. Để bài yêu cầu là chữ MERN nghiêng 30 độ và ý nghĩa của 50px kia là gì ạ?

Em cảm ơn ạ

Đây là code html của em:

   <body>
  <header>
  <p> WPR </p> 
  <p id='mern'>MERN</p>
  </header>


    <article>
      <section id="quiz-name">
        <h1 id='hello'>HTML Quiz</h1>  <br> 
      </section>
</article>

Đây là code css của em:

        body {
    font-family:'Proxima Nova',Arial, Helvetica, sans-serif;
    font-size:18px;
    color: #222222;
    display:flex;
    justify-content: center;
    align-items: center;    
    flex-direction: column; }

header {

    display: flex;
    justify-content: center;
    align-items: center;

}
header p {
    display:inline-block;
    border-bottom:1px solid black;

}


#mern {
    float:right;
    
}

article {
    display: flex;
    justify-content: center;
    align-items:center ;
    flex-direction:column;
    
}

 #quiz-name {
    background-image:url(../starter_pack/images/background.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:middle;
    width:700px;
    height:425px;

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

kisuluoibieng · September 23, 2021, 11:54am

có rất nhiều giải pháp cho 2 phần nó nằm ở side by side thay vì sắp xếp trên dưới, cùi bắp nhất là float, advance hơn thì có flex, thậm chí grid cũng làm được
chữ mern như vậy có nghĩa nó phải là 4 component riêng biệt, ít nhất cũng là thẻ span hoặc div hoặc gì đó cover mỗi chữ. sau đó to backgroun + set border cho nó tròn, css cũng có hỗ trợ thuộc tính xoay luôn

thay vì bạn mang cả 1 big problem thì bạn nên phân tích nó thành nhiều phần nhỏ rồi search từng phần nhỏ lại sẽ tốt hơn

còn bài post này chỉ có css thì fix bằng niềm tin