jeudi 8 août 2019

Why my ui-li button's touch field has cut?

I made div-ul-li-a button on html. But when I click it, it react on only left field. It isn't react on right field. Why is it?

제가 만든 코드에서, div - ul - li - a 형식의 버튼이 왼쪽 부분만 반응하고 오른쪽 부분은 반응하지 않아요.

This is html file for show on web. I use PyCharm tool to use Flask and Python. ( html file in Pycharm ) Pycharm에서 Flask를 통해 html 파일을 웹으로 보여주고 있습니다.

CSS Style about this button and button code

.menubar{
position:fixed;
left:850px;
color:#BDBDBD;
border:none;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}

.menubar :hover {
border:0px;
text-decoration:none;
}

.menubar ul{
list-style:none;
}

/* menubar 각 버튼 기본노출색상 */
.menubar li{
width:80px;
height:38px;
float:left;
padding:0px;/*글자위치*/
margin:10px;/*글자의 배경 위치*/
background:#BDBDBD;
}

.menubar li a{
/* background: #FCAC76; */
color:#ffffff;
display:block;
font-size:15px;
font-weight:normal;
line-height:40px;
margin:0px;
text-align:center;
text-decoration:none;
}

/* menubar 각 버튼 호버 시 노출색상 */
.menubar li a:hover, .menubar ul li:hover a{
width:80px;
height:38px;
/*background: #FCAC76;*/
color:#FFFFFF;
text-decoration:none;
}

.menubar li ul{
color:#000000;
background: #06D683;
display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */
padding:0px;
margin:0px;
border:0px;
position:absolute;
z-index:200;
}


/*.menubar li:hover ul{
display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */
/*}*/

/*
.menubar li li {
background: #06D683;
display:block;
float:none;
margin:0px;
padding:0px;
}

.menubar li:hover li a{
background:none;
}
*/

.menubar li ul a{
color:#000000;
display:block;
font-size:15px;
font-style:normal;
margin:0px;
padding:0px 0px 0px 0px;
text-align:center;
}

.menubar li ul a:hover, .menubar li ul li:hover a{
background: #FCAC76;
border:0px;
/* color:#ffffff; */
text-decoration:none;
}

.menubar p{
clear:left;
color:#000000;
}

<div class="navbar navbar-inverse navbar-fixed-top" style="border-bottom:1px #dddddd solid; background-color:#ffffff; padding:14px;">
    <div class="container" style="height:40px; width:1000px;">
      <div class="navbar-header" style="float:left;">
        <a href="/" class="navbar-brand"><img src="static/logo_snu.png" style="width:40px; height:40px; float:left;"></a>
        <!--<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">-->
          <!--<span class="icon-bar"></span>-->
          <!--<span class="icon-bar"></span>-->
          <!--<span class="icon-bar"></span>-->
        <!--</button>-->
      </div>
      <div id="navbar-main" style="float:left; padding:7px;">
        <ul class="nav navbar-nav" style="float:left;">
          <li class="greeting"       ><a style="color:#000;" href="">인사말</a></li>
          <li class="life"           ><a style="color:#000;" href="">생활사</a></li>
          <li class="drugs_info"     ><a style="color:#000;" href="">등록약제</a></li>
          <li class="resistance_info"><a style="color:#000;" href="">저항성 정보</a></li>
          <li class="view"           ><a style="color:#000;" href="">데이터 보기</a></li>
          <li class="upload"         ><a style="color:#000;" href="">데이터 입력</a></li>
          <li class="reference"      ><a style="color:#000;" href="">참고문헌</a></li>

          <!--<li class="dropdown">-->
            <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">자연어 <span class="caret"></span></a>-->
            <!--<ul class="dropdown-menu" aria-labelledby="themes">-->
              <!--<li><a href="http://openhangul.com/nlp_orig">기본형추출</a></li><li class="divider"></li><li><a href="http://openhangul.com/nlp_ko2en">한글 > 알파벳</a></li><li class="divider"></li><li><a href="http://openhangul.com/nlp_topic">카테고리 추출</a></li><li class="divider"></li><li><a href="http://openhangul.com/nlp_jaso">자소분리</a></li><li class="divider"></li><li><a href="http://openhangul.com/nlp_typo">근접어</a></li><li class="divider"></li><li><a href="http://openhangul.com/nlp_lang_detect">언어판별</a></li><li class="divider"></li><li><a href="http://openhangul.com/morpheme">형태소</a></li>              </ul>-->
          <!--</li>-->
        </ul>
<!--          menubar가 div:navbar-main에 들어있는데, menubar 줄을 밑으로 내리려면 밖으로 빼야 함-->
          <div class="menubar">
            <ul><li><a href="" id="curA" style="background:#F78181; width:80px; height:38px;"><label>애멸구</label></a></li></ul>
          </div>
          <div class="menubar" style="float:left; margin-left:90px;">
            <ul><li><a href="" id="curB"><label>배추좀나방</label></a></li></ul>
          </div>
          <div class="menubar" style="float:left; margin-left:180px;">
            <ul><li><a href="" id="curC"><label>탄저병</label></a></li></ul>
          </div>
      </div>
    </div>
  </div>

It hasn't error message, just unclick.




Aucun commentaire:

Enregistrer un commentaire