Wie stylt man ein div wie das button-element?

Habe ich bemerkt, dass bei der Verwendung der <button></button> element, der Browser wird natürlich davon ausgehen, dass Sie möchten, um die Mitte der inline-Inhalte, und dass das element klickbar ist. Ist es möglich einen div-Verhalten in der gleichen Weise wie bei css? Ich ging durch das UA-stylesheet, um zu sehen, wenn ich könnte es herausfinden, aber nichts machte ihn Mitte vertikal.

Die einzige andere Möglichkeit, die ich kenne, um das gleiche Ergebnis ist mit 2 divs. Ein wrapper mit display: table, und ein div mit display: table-cell und vertical-align: middle.

Aber das schafft eine weitere div. Ist es möglich, zu erreichen, die das gleiche Verhalten mit nur einem element?

Dank.

extra div oder Aufenthalt ist immer einen normalen Bedarf/Anforderung für viele fortgeschrittene features in HTML/CSS. So ist es völlig akzeptabel.
Sie können es tun, wenn Sie sind ok mit Höhen. Auch die Zeilenhöhe wird helfen. Aber wenn Sie nicht wissen, die Breite/Höhe von Ihrem Gehalt, oder variiert es alot, dann müsste man ändern, um diese potenziell.
Ich bin nicht in Ordnung mit der eingestellten Höhe, das ist Teil des Problems, das gelöst ist mit dem button-element.
Ich weiß, und ich bin. Aber da das button-element ist bereits in der Lage zu bekommen, um dieses sollte es möglich sein, es zu tun auf einem normalen div? Aber ich denke, die Elemente bilden, hat ein spezielles Verhalten, das kann nicht repliziert werden?.
natürlich 1 div kann nicht die gleiche Funktionalität haben, der Punkt ist, was Sie sehen, ist, was die browser intern, die button ist entworfen, um gerendert werden, wie das aber div ist nicht.

InformationsquelleAutor Malibur | 2014-05-12

  1. 7

    http://jsfiddle.net/8Sj4A/3/ - das muss Mitte vertikal und horizontal (nur Hinzugefügt text-align: center; dem Zitat Antwort)

    div {
    display:inline-block;
    color:#444;
    border:1px solid #CCC;
    background:#DDD;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    cursor:pointer;
    vertical-align:middle;
    max-width: 100px;
    padding: 5px;
    text-align: center;
}
div:active {
    color:red;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}
    buttons haben keine max-width 😉
    Seinen nicht vertikal zentriert ist? wenn Sie eine neue Höhe für das div, der Inhalt ist immer noch oben? oder bin ich etwas fehlt? vertical-align funktioniert nicht bei inline-blocks funktioniert es?
    Korrektur.. vertical-align nicht auf die Inhalte von inline-blocks. das ist nur Tabelle-Zellen? richtig?
    jsfiddle.net/8Sj4A/4 - display: table-cell; Sortieren sollte das vertikale ausrichten

    InformationsquelleAutor Alex

  2. 1

    Können Sie mittig den Inhalt einer divby Zugabe der gleichen Menge Menge der Polsterung auf jeder Seite.

    padding:2px 10px;

    Dieser fügt 2px oben und unten und 10px nach Links und rechts, so zentrieren Sie den Inhalt in das div.

    Ich auch gestylt, der rest der div zu schauen und Verhalten sich wie ein button. Sieht basieren auf Firefox Standard -<button>.

    http://jsfiddle.net/evSb5/2/

    InformationsquelleAutor timo

  3. 0

    Vielleicht hast du die falsche Frage gestellt.

    Es möglicherweise einfacher, geben Sie Ihrem button einen Klasse und dann sicherstellen, dass der inline-Inhalt, Stil, wie Sie wollen.

    Alles, was Sie können in ein DIV, Sie sollten in der Lage, in einem button.

    Eher ein Kommentar als eine Antwort, nicht Sie denken so?
    Ein bisschen von beidem :-). Styling eine Taste würde wahrscheinlich Ergebnis in weniger benutzerdefinierte CSS als die anderen hier beantworten, da der Grundlinie näher ist, was benötigt wird.
    Ich weiß, dass ich könnte, verwenden Sie einfach das button-element, aber da kann man machen divs Verhalten sich wie Tabellen, ich hatte gehofft, ich könnte machen Sie Verhalten sich wie die Tasten auch. Gibt mir mehr sematic Freiheit 🙂 fühlt sich komisch an, fügen Sie cursor-Eigenschaften für ein element, um loszuwerden, der Zeiger.

    InformationsquelleAutor vogomatix

  4. 0

    Brauchen Sie nicht mehrere divs, überprüfen Sie diese JSFiddle, es ist ein einzelnes DIV-Element, das aussieht und verhält sich wie eine Schaltfläche.

    HTML: 

    <div class='btn'>
  this looks like a button
</div>

    CSS:

    .btn{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;

    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

    Wenn Sie möchten, dass die Taste tatsächlich link zu etwas (Verhalten sich wie ein link), ändern Sie einfach Ihre HTML:

    <a href='test.html' class='btn'>
  this looks like a button
</a>

    Wenn Sie bootstrap Sie nicht haben, zu definieren .btn Klasse, es ist darin enthalten.

    InformationsquelleAutor patrick

  5. -1

    css:

    div.button {
  display:inline-block;
  -webkit-appearance:button;
  padding:3px 8px 3px 8px;
  font-size:13px;
  position:relative;
  cursor:context-menu;
}

    html:

    <div role="button" class="button">Press Me!</div>

    Diese bekommt man so nah wie ich bekommen konnte, um eine echte Taste.

    Für etwas anderes als Chrome: schauen Sie in appearance. Eigentlich nur Chrome verwenden... 🙂

    InformationsquelleAutor iAmOren

Schreibe einen Kommentar