CODEWITHSUNDEEP
htmlcss
이현도
이현도

Reputation: 21

How can I arrange these two items in a row?

enter image description here

I would like to list items A and B side by side in CSS. What should I do?

HTML code

   <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="ex1.css">
        <link rel="stylesheet" href="grid.min.css">
        <title>Document</title>
    </head>
    
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12 logo-title">
                    <div class="logo">
                        <a class="title" href="">
                        </a>
                    </div>
                    <div class="category">
                    <a href="" class="head-talk">이야기하다</a>
                    <a href="" class="finance-head">금융하다</a>
                    <a href="" class="togeather-head">함께하다</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    </html>

CSS code

.logo {
  height: 78px;
}
body {
 font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
  text-decoration: none;
  color: #000;

}
/* head title */

.category {
  font-size-adjust: 18px;
  font-weight: 700;
}
.title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 118px;
    height: 30px;
    background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
    background-position:  0% 43%;
}

I hope a tags are arranged in a horizontal line.

I want the A and B in the picture in a row, and I've adjusted the width of the parent element, but it didn't work.

Upvotes: 0

Views: 53

Answers (3)

Rayees AC
Rayees AC

Reputation: 4659

Use bootstrap grid system.

<div class="container">
    <div class="row">
        <div class="col-6 logo-title">
            <div class="logo">
                <a class="title" href="">
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="category d-flex align-items-center justify-content-center">
              <a href="" class="head-talk">이야기하다</a>
              <a href="" class="finance-head">금융하다</a>
              <a href="" class="togeather-head">함께하다</a>
            </div>
        </div>
    </div>
</div>


.logo {
  height: 78px;
}
body {
 font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
  text-decoration: none;
  color: #000;
}
/* head title */

.category {
  font-size-adjust: 18px;
  font-weight: 700;
  height: 78px; 
}
.title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 118px;
    height: 30px;
    background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
    background-position:  0% 43%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="ex1.css">
    <link rel="stylesheet" href="grid.min.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-6 logo-title">
                <div class="logo">
                    <a class="title" href="">
                    </a>
                </div>
            </div>
            <div class="col-6">
                <div class="category d-flex align-items-center justify-content-center">
                  <a href="" class="head-talk">이야기하다</a>
                  <a href="" class="finance-head">금융하다</a>
                  <a href="" class="togeather-head">함께하다</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Upvotes: 0

Fergoso
Fergoso

Reputation: 1582

Just change the HTML structure to use the propper bootstrap classes.

    <div class="container">
      <div class="row align-items-center">
        <div class="col logo">
          <a class="title" href="">
          </a>
        </div>
        <div class="col-auto category">
          <a href="" class="head-talk">이야기하다</a>
          <a href="" class="finance-head">금융하다</a>
          <a href="" class="togeather-head">함께하다</a>
        </div>
      </div>
    </div>

jsFiddle

Upvotes: 1

Srinivas Bendkhale
Srinivas Bendkhale

Reputation: 93

.logo {
      height: 78px;
      float:left
    }
    body {
     font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
    }
    a {
      text-decoration: none;
      color: #000;
      margin-top:5px;
      float:left
    }
    /* head title */
    
    .category {
      font-size-adjust: 18px;
      font-weight: 700;
    }
    .title {
        float:left;
        display: inline-block;
        width: 118px;
        height: 30px;
        margin:0px;
        background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
        background-position:  0% 43%;
    }
 <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="ex1.css">
        <link rel="stylesheet" href="grid.min.css">
        <title>Document</title>
    </head>
    
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12 logo-title">
                    <div class="logo">
                        <a class="title" href="">
                        </a>
                    </div>
                    <div class="category">
                    <a href="" class="head-talk">이야기하다</a>
                    <a href="" class="finance-head">금융하다</a>
                    <a href="" class="togeather-head">함께하다</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    </html>

MODIFY THE CSS

.logo {
  height: 78px;
  float:left
}
body {
 font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
  text-decoration: none;
  color: #000;
  margin-top:5px;
  float:left
}
/* head title */

.category {
  font-size-adjust: 18px;
  font-weight: 700;
}
.title {
    float:left;
    display: inline-block;
    width: 118px;
    height: 30px;
    margin:0px;
    background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
    background-position:  0% 43%;
}

enter image description here

Upvotes: 0

Related Questions