css 좀 수정해주세요..
본문
메뉴1(3) 메뉴2(4)
이런식으로 메뉴옆에 동그라미 숫자를 붙이고싶어요
아래로 숫자가 나오는데 바로 옆으로 어떻게 붙이나요?
<?
header("Content-Type: text/html;charset=euc-kr");
?>
<style>
#sit_ov_btn2 a {display:inline-block;padding: 0;vertical-align:middle;text-decoration:none;letter-spacing:0.3em;line-height:30px;height:30px;text-align:center}
#btn_auth {border:1px solid #0b0b0b !important;color:#2c2c2c;width:150px;background:#f8f8f8;margin-top:5px;font-weight:bold;border-radius : 3px 3px;}
.centered-circle {
width: 23px; height: 23px; background-color: green; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #ffffff; font-size: 13px; font-weight: bold;position:absolute;
}
</style>
<div id="sit_ov_btn2" style="width:100%;text-align:center">
<a href="#" id="btn_auth" >메뉴1 <span class="centered-circle">3</span></a>
<a href="#" id="btn_auth" >메뉴2<span class="centered-circle">4</span></a>
</div>
답변 4
요샌 이런 건 AI 이용하면 뚝딱 수정해 줘요.
코드 복사해서 옆으로 오게 수정해주라고 했더니 아래처럼 수정해 주네요.
inline-block 보다 display:flex 사용하세요.
<div style="display:flex;align-items: center;gap:10px;">
<div style="display:flex;align-items: center;gap:10px;background:#333;color:#fff;padding:10px 20px;">
<div>asdf</div>
<div style="display:flex;align-items: center;justify-content: center;border-radius:30px;width:30px;height:30px;background:#cc0000;color:#fff;font-size:1rem;padding:0px;line-height:0px;">1</div>
</div>
<div style="display:flex;align-items: center;gap:10px;background:#333;color:#fff;padding:10px 20px;">
<div>asdf</div>
<div style="display:flex;align-items: center;justify-content: center;border-radius:30px;width:30px;height:30px;background:#cc0000;color:#fff;font-size:1rem;padding:0px;line-height:0px;">1</div>
</div>
</div>
그리고 문자 타입도 euc-kr 인데 코딩을 잘못하고 계신것 같은데요?
답변감사합니다. 채택 못드려서 죄송합니다.
#sit_ov_btn2 a { display:inline-flex; align-items:center; justify-content:center; gap:10px; }
이미 숫자가 출력되는 원에다가 flet 를 주신 것처럼 flex 를 이용해서 잡으면 될 것 같습니다
https://studiomeal.com/archives/197
답변감사합니다. 채택 못드려서 죄송합니다.
동그라미 같은경우 position:absolute;bottom:0;left:0; 으로 div 혹은 버튼에 주시고 부모한테 #sit_ov_btn2 에서 position:relative; 주시면되요
답변감사합니다. 채택 못드려서 죄송합니다.
답변을 작성하시기 전에 로그인 해주세요.
