하이퍼 링크로 만들 때 스태킹 목록 항목

Question

두 그룹의 코드와 대부분의 사람들에게는 다소 쉬운 질문이지만 그럼에도 질문이 있습니다.

이 작업 CSS를 implemantation와 준비가 만든 코드의 조각 :

<div class="subTopHolder"> 
    <ul class="language"> 
      <li><a href="#" title="Türkçe">TR</a></li> 
      <li>EN</li> 
     </ul> 

는 그리고 최대한 빨리 하이퍼 링크로 EN을 돌리면 나옵니다. 결과 코드 :

<div class="subTopHolder"> 
    <ul class="language"> 
      <li><a href="#" title="Türkçe">TR</a></li> 
      <li><a href="#" title="English">EN</a></li> 
     </ul> 

이 경우 여백이 나란히 서서하는 것이 아니라 세로로 쌓입니다.

동반 CSS 코드 :

div.subTopHolder 
{ 
    width:1002px; 
    height:201px; 
    margin:auto auto; 
    padding:0 12px; 
    position:relative; 
    overflow:hidden; 
    background:url(../images/bck-bannerHolder.jpg) no-repeat center top; 
} 

ul.language 
{ 
    float:right; 
    clear:left; 
    padding:2px 0; 
    margin-bottom:4px; 
    cursor:default; 

} 
ul.language li 
{ 
    display:inline; 
    background:#f8c180; 
    padding:2px 4px; 
    font-size:10px; 
    cursor:default; 
    text-shadow:0 1px white; 
    border-radius:2px; 
} 
ul.language li a 
{ 
    font-size:10px; 
    display:block-inline; 
    background:#fff; 
    color:#000; 
    text-decoration:none; 
    margin:-2px -4px; 
    padding:2px 4px; 
    border-radius:2px; 


    transition:all .5s; 
    -moz-transition:all .5s; 
    -webkit-transition:all .5s; 
} 
ul.language li a:hover 
{ 
    box-shadow:1px 1px 8px 0px black; 

Answer 1

세트 ul.language 리 같아야 인라인 블록 또는 float :

ul.language li 
{ 
// with ie hack 
    display:inline; 
    float : left; 
    zoom : 1; 
} 

or 

ul.language li 
{ 
    *display : inline; 
    zoom  : 1; 
    display:inline-block; 
} 

Answer 2

그것은 디스플레이

<a href="#" title="English">English</a> 

Answer 3

거기 왼쪽 두 가지 문제가 여기에 있습니다.

1. 먼저 HTML 구문이 잘못되었습니다. 올바르게 형성 링크는해야한다 : 당신은 ul.language li에 잘못된 스타일을 적용한

   <a href="#" title="English">EN</a> 
   

2. . display: inline; 대신 display: inline-block;으로 지정하십시오.