테스트 사이트 - 개발 중인 베타 버전입니다

CSS를 수정해 보려고 하는데 쉽지 않네요. 채택완료

alexseo 3년 전 조회 1,839

CSS를 수정해 보려고 하는데 쉽지 않네요.

군/구를 시/도 가로 사이즈와 같은 사이즈로 조절을 하려고 하는데 

잘 안됩니다.

아래의 css에서 어디를 수정해야 하나요?

감사합니다.

 

 

=========================================================================================

 

?>

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
3년 전

반응형 미디어쿼리 부분은 제외하고 살짝 재구성해 봤습니다.

</p>

<p><style>

.navbar {

  /* overflow: hidden; */

  background-color: #333; 

  position: relative;

}</p>

<p>.navbar a {

  float: left;

  font-size: 14px;

  color: white;

  text-align: center;

  padding: 1px 15px;

  text-decoration: none;

}</p>

<p>.subnav {

  float: left;

  /* overflow: hidden; */

}</p>

<p>.subnav .subnavbtn {

  font-size: 14px;

  line-height: 20px;

  border: none;

  outline: none;

  color: white;

  padding: 5px 1px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;</p>

<p>}</p>

<p>.navbar a:hover, .subnav:hover .subnavbtn {

  background-color: #ff8900;

}</p>

<p>.subnav-content {

  display: none;

  position: absolute;

  left: 0;

  background-color: #ff8900;

  width: 100%;

  /* z-index: 1; */

  top: 30px; /* .subnav .subnavbtn : line-height(20) + padding-top(5) + padding-bottom(5) = 30 */

}</p>

<p>

.subnav-content a {

  float: left;

  color: white;

  text-decoration: none;

  padding: 5px 20px;

}</p>

<p>.subnav-content a:hover {

  background-color: #eee;

  color: black;

}</p>

<p>.subnav:hover .subnav-content {

  display: block;

}</p>

<p>.navbar::after {

  content: "";

  display: block;

  clear: left;

}

.subnav-content::after {

  content: "";

  display: block;

  clear: left;

}

</style></p>

<p>

<div class="navbar"></p>

<p> <div class="subnav">

  <button class="subnavbtn"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information">전국</a></button>

</div> 

  

  

  

  <div class="subnav">

  

    <button class="subnavbtn"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7&stx=서울">서울</a> </button>

    

    </p>

<p>    <div class="subnav-content">

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강남구">강남구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강동구">강동구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강북구">강북구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강서구">강서구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=관악구">관악구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=광진구">광진구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=구로구">구로구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=금천구">금천구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=노원구">노원구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=도봉구">도봉구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=동대문구">동대문구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=동작구">동작구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=마포구">마포구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=서대문구">서대문구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=서초구">서초구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=성동구">성동구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=성북구">성북구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=송파구">송파구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=양천구">양천구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=영등포구">영등포구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=용산구">용산구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=은평구">은평구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=종로구">종로구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=중구">중구</a>

      <a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=중랑구">중랑구</a>

                                                </p>

<p>    </div></p>

<p>    

    

  </div>

</div></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

a
3년 전

답변 감사합니다.

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인