2つのインラインボタンの間のスペースを削除するにはどうすればよいですか？

Question

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>

Answer 1

インライン要素は、あなたのコード内で空白に敏感であるため、単にそれを削除します。あなたもHTMLでそれを占有することによって、ホワイトスペースを削除することができ

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>

注<!-- -->

コメント