css 좀 수정해주세요.. 채택완료
메뉴1(3) 메뉴2(4)
이런식으로 메뉴옆에 동그라미 숫자를 붙이고싶어요
아래로 숫자가 나오는데 바로 옆으로 어떻게 붙이나요?
http://sir.kr/data/editor/2508/3731829775_1754621830.585.png" width="394" />
</p>
<p><?
header("Content-Type: text/html;charset=euc-kr");
?>
<style></p>
<p>#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;}</p>
<p>.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></p>
<p> <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></p>
<p>답변 4개
요샌 이런 건 AI 이용하면 뚝딱 수정해 줘요.
코드 복사해서 옆으로 오게 수정해주라고 했더니 아래처럼 수정해 주네요.
댓글을 작성하려면 로그인이 필요합니다.
inline-block 보다 display:flex 사용하세요.
</p>
<p><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></p>
<p>
그리고 문자 타입도 euc-kr 인데 코딩을 잘못하고 계신것 같은데요?
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
동그라미 같은경우 position:absolute;bottom:0;left:0; 으로 div 혹은 버튼에 주시고 부모한테 #sit_ov_btn2 에서 position:relative; 주시면되요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
</p>
<pre>
<code>#sit_ov_btn2 a { display:inline-flex; align-items:center; justify-content:center; gap:10px; }</code>
</pre>
<p>이미 숫자가 출력되는 원에다가 flet 를 주신 것처럼 flex 를 이용해서 잡으면 될 것 같습니다
https://studiomeal.com/archives/197
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인