1
4 개의 인라인 버튼이있는 네비게이션을 만들고 싶습니다. 그러나 이렇게하면 각 버튼 사이에 약간의 공백이 생깁니다.두 개의 인라인 단추 사이의 간격을 제거하는 방법은 무엇입니까?
나는 display: inline과 display: inline-block을 시도했지만 어느 쪽도 도움이되지 않습니다.
나는 float: left과 작동하도록 할 수는 있지만 일반적으로 수레를 사용하는 것을 좋아하지 않습니다. 다른 방법이 있습니까?
감사!
- 제시
div {
margin: 0;
padding: 0;
border: 0;
}
div ul {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
div ul li {
margin: 0;
padding: 0;
border: 0;
display: inline;
/* float: left; */
}
div ul li button {
margin: 0;
padding: 20px;
border: 0;
text-align: center;
}
#one {
background-color: blue;
}
#two {
background-color: orange;
}
#three {
background-color: purple;
}
#four {
background-color: yellow;
}<div>
<ul>
<li>
<button id="one">Button 1</button>
</li>
<li>
<button id="two">Button 2</button>
</li>
<li>
<button id="three">Button 3</button>
</li>
<li>
<button id="four">Button 4</button>
</li>
</ul>
</div>