web-dev-qa-db-ja.com

ボタン間の余分なスペースを削除するには？

チェックしてください jsfiddleのこのコード

HTML：

<div id="main">
    <div id="menu">
        <a href="#" class="buttons">Home</a>
        <a href="#" class="buttons">About Us</a>
        <a href="#" class="buttons">Pictures</a>
        <a href="#" class="buttons">Contact Us</a>
    </div>
</div>

CSS：

#main
{
    width: 64em;
    height: 25em;
}

#menu

    {
        background-color: #00b875;
        height: 3em;
    }

    .buttons
    {
        text-decoration: none;
        color: #ffffff;
        line-height: 3em;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        font-family: courier new;
        -moz-transition: 1s linear;
        -ms-transition: 1s linear;
        -o-transition: 1s linear;
        -webkit-transition: 1s linear;
        transition: 1s linear;
    }

    .buttons:hover
    {
        background-color: #0d96d6;
    }

あるボタンから別のボタンにすばやく切り替えると、実際には2つのボタンの間にある程度のギャップがあることに気付くでしょう。このスペースを取り除きたいです。何か案は？質問に答える場合は、特定のプロパティがこれを修正する理由も説明してください。

パディングとマージンを使用して調整できることは知っていますが、ズームすると結果が歪む可能性があります。問題を解決する安定した方法を指摘してください。

ありがとう

htmlcssanimationbuttonweb
19
amin

これを見てください jsFiddle

メニューリンクでdisplay:inline-block;をdisplay:block;に更新し、float:leftを追加しました。

inline-blockを使用すると、HTMLマークアップ内の要素間の空白が原因で、要素間にこのいインラインギャップが生じます。

26
Yotam Omer

HTMLのタグ間の空白はすべて単一のスペース文字に折りたたまれているため、そのギャップがあります。

あなたは出来る：

  • 要素を左にフロートし、
  • 置く </a>および<a>ソース内の隣同士、または
  • 使う font-size: 0 騙す

この場合、個人的にはすべての<a>sを残しましたが、ソースから空白を削除する際の注意点は最も少なく、読みにくいということだけです。

15
Bojangles

スペース自体を取り除きます：これは乱雑に見えるかもしれませんが、実際にはあなたができる最もクリーンなことです。 CSSトリックで達成できることは、スペースをそこに置いて、その存在を否定することです。代わりに、それらを省略したい場合があります。解決すべき唯一の問題は読みやすさです。

それで読みやすくしましょう：

<div id="main">
    <div id="menu">
        <!--
        --><a href="#" class="buttons">Home</a><!--
        --><a href="#" class="buttons">About Us</a><!--
        --><a href="#" class="buttons">Pictures</a><!--
        --><a href="#" class="buttons">Contact Us</a><!--
        -->
    </div>
</div>

繰り返しますが、私は奇妙に思えます、はい、しかし考えてみてください。ここでの本当の変人はHTMLそのものであり、これを行う明確な方法を提供していません。特別なマークアップと考えてください！ HTML標準の一部である可能性もあります。技術的には、btw、itis100％標準、コメントを自由に使用できます...

8
dkellner

ここにあなたの解決策があります

http://jsfiddle.net/NPqSr/7/

.buttons
{
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left: 10px;
    float:left;
    padding-right: 10px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}
1
sangram parmar

これを試してください（JSFiddle）

CSS

#main {

    height: 25em;
}

#menu {
    background-color: #00b875;
    height: 3em;
}

.buttons {
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

.buttons:hover {
    background-color: #0d96d6;
}
0
Falguni Panchal

2017：要素内にdisplay: inline-flexでラップし、flex: 0 1 autoのようなもので内側のボタンを曲げます：

<div style="display: inline-flex">
    <button style="flex: 0 1 auto">...</button>
0
Mateo Tibaquira

以下のスタイルをボタンに追加します。必要に応じて、いくつかのボタンの最初のマージンをマイナスにします。

ボタン{margin: 0px;}

0
VickyCool

最新のCSSの可能性を考えれば、よりクリーンなソリューションはdisplay:inline-flexメニューとdisplay:flexボタン、そしておそらくwidth:100%メニュー：

http://jsfiddle.net/NPqSr/212/

0
adrianTNT

ブートストラップを使用する場合、divをclass = "btn-group"でラップすることにより、ボタンをグループ化できます。 v3.3.7の例： https://getbootstrap.com/docs/3.3/components/#btn-groups-single

視覚的には、必要な場合とそうでない場合があります。左端と右端の角が丸く、ボタン間の直線があります。

0
Ben Kao