wake-up-neo.com

wie kann ich zusätzlichen Abstand zwischen den Tasten löschen?

bitte check out diesen Code in 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;
    }

wenn Sie schnell von einer Taste zur anderen wechseln, werden Sie feststellen, dass zwischen den beiden Tasten tatsächlich eine Lücke besteht. Ich möchte diesen Raum loswerden. irgendwelche Ideen? Wenn Sie die Frage beantworten, erläutern Sie bitte auch, warum eine bestimmte Eigenschaft dies behebt.

ich weiß, dass es mit Padding und Ränder optimiert werden kann, aber das Ergebnis wird beim Zoomen wahrscheinlich verzerrt. Bitte weisen Sie auf einen stabilen Weg zur Lösung des Problems hin.

vielen Dank

htmlcssanimationbuttonweb
18
amin

Sehen Sie sich diese jsFiddle an

Ich habe display:inline-block; zu display:block; in den Menü-Links aktualisiert und float:left hinzugefügt.

Wenn Sie inline-block verwenden, wird diese hässliche Inline-Lücke zwischen den Elementen durch den Leerraum zwischen den Elementen in Ihrer HTML-Markierung verursacht.

26
Yotam Omer

Alle Leerzeichen zwischen Tags in HTML werden zu einem Leerzeichen zusammengefasst, weshalb Sie diese Lücke haben. 

Du könntest:

  • Schwebe deine Elemente nach links, 
  • Platzieren Sie </a> und <a> nebeneinander in der Quelle oder 
  • Verwenden Sie einen font-size: 0-Trick

In diesem Fall würde ich persönlich alle meine <a>s schweben lassen, obwohl das Entfernen von Whitespace aus Ihrer Quelle die geringsten Vorbehalte mit sich bringt.

15
Bojangles

Beseitigen Sie die Räume selbst: Dies kann unordentlich aussehen, aber es ist tatsächlich das sauberste, was Sie tun können. Alles, was Sie mit CSS-Tricks erreichen, besteht darin, die Leerzeichen dort zu platzieren und dann ihre Existenz zu leugnen. Stattdessen möchten Sie sie möglicherweise weglassen. Das einzige zu lösende Problem ist die Lesbarkeit.

Also machen wir es lesbar:

<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>

Wieder, ich weiß, dass es seltsam erscheint, ja, aber denke darüber nach. Das eigentliche Verrückte hier ist HTML selbst, das Ihnen keine klare Möglichkeit bietet. Betrachten Sie es als besondere Auszeichnung! Es könnte auch Teil des HTML-Standards sein; Technisch gesehen, es ist ist 100% Standard, Sie können Kommentare verwenden ...

7
dkellner

hier ist deine Lösung

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

Probier das(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

Es ist 2017 : wickeln Sie sie in ein Element mit display: inline-flex ein und biegen Sie die inneren Knöpfe mit etwas wie flex: 0 1 auto:

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

Fügen Sie den untenstehenden Stil zu Ihrer Schaltfläche hinzu. Falls erforderlich, machen Sie den Rand für die erste der wenigen Schaltflächen negativ.

schaltfläche {margin: 0px;}

0
VickyCool

Ich denke, mit den neuesten CSS-Möglichkeiten ist eine sauberere Lösung die Verwendung von display:inline-flex im Menü und display:flex auf Schaltflächen und möglicherweise width:100% im Menü:

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

0
adrianTNT

Wenn Sie Bootstrap verwenden, können Sie Schaltflächen gruppieren, indem Sie div mit class = "btn-group" einschließen. Beispiel für v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single

Visuell könnte oder könnte nicht sein, was Sie wollen. Hat abgerundete Ecken am linken und rechten Ende und eine gerade Linie zwischen den Knöpfen.

0
Ben Kao