목록의 링크가 줄 바꿈을 가져옴

Question

w3css에 문제가 있습니다. w3css 탐색 막대에 링크를 추가하면 줄 바꿈이 표시됩니다.

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"> 
 

 
<div class="w3-bottom" style="margin-bottom: 1px"> 
 
    <ul class="w3-navbar w3-red" style="float: clear;"> 
 
    <li style="margin-left: 2px"> 
 
     Powered by <a href="https://www.w3schools.com/w3css/">w3css</a> and <a href="http://fontawesome.io/">fontawesome</a> | 
 
    </li> 
 
    </ul> 
 
</div>

나는 한 줄에 모든 것을하고 싶습니다. 고마워요, 고마워요. :)

// Cripi는

Answer 1

이는 인라인 블록 수에 당신은 디스플레이 속성을 편집 할 경우

.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input { 
    display: block; 
    padding: 8px 16px; 
} 

을 포함 한 W3의 CSS 파일에서 오는 코드의 조각이다 그러면 예상대로 작동합니다.

여기 당신이 필요로하는 코드와 예제 링크

.w3-navbar > li > a { 
    display:inline-block !important; 
} 

입니다! "중요한"그렇지 않으면 우선 순위가있을 것입니다 자신의 스타일 시트를 덮어 쓰기합니다. 디스플레이 차단 동작 : 인라인 행동

http://codepen.io/hoonin_hooligan/pen/Mpwqwm

Answer 2

당신은 디스플레이를 변경해야합니다. (그리고 패딩을 제거하여 덜 기묘 해 보이게합니다.) 브라우저가 특정 값을 받아들이도록하는 것이 중요합니다. 당신은 더 높은 특이점 선별기, pageload의 나중에 동일한 특이성 선별기로 바꿔야하므로 이전 값을 덮어 쓰거나 현재 선별기의 css 파일을 변경해야합니다.

.w3-navbar li a{ 
 
    display:inline !important; 
 
    padding: 0px !important; 
 
}

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" /> 
 
<div class="w3-bottom" style="margin-bottom: 1px"> 
 
    <ul class="w3-navbar w3-red" style="float: clear;"> 
 
    <li style="margin-left: 2px"> 
 
     Powered by 
 
     <a href="https://www.w3schools.com/w3css/"> 
 
        w3css 
 
       </a> and 
 
     <a href="http://fontawesome.io/"> 
 
        fontawesome 
 
       </a> | 
 
    </li> 
 
    </ul> 
 
</div>