Le Style CSS pour un Bouton: à l'Aide de <input type="button> au lieu de <button>

Je suis en train de style d'un bouton à l'aide d' <input type="button"> au lieu de simplement <button>. Avec le code que j'ai, le bouton s'étend tout le chemin à travers l'écran. Je veux juste être en mesure de l'adapter au texte qu'il est dans le bouton. Des idées?

Voir le jsFiddle Exemple ou continuer sur le code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>WTF</title>
</head>
<style type="text/css">
 .button {
  color:#08233e;
  font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
  font-size:70%;
  padding:14px;
  background:url(overlay.png) repeat-x center #ffcc00;
  background-color:rgba(255,204,0,1);
  border:1px solid #ffcc00;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border-bottom:1px solid #9f9f9f;
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  cursor:pointer;
 }
 .button:hover {
  background-color:rgba(255,204,0,0.8);
 }
</style>
<body>
 <div class="button">
  <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)">
 </div> 
</body>

vous avez besoin pour le style de l'entrée pas la div autour d'elle

InformationsquelleAutor Varun Shetty | 2012-06-15

button css

9

Dans votre .button CSS, essayez display:inline-block. Voir ce JSFiddle

InformationsquelleAutor huzzah

Voulez-vous vraiment le style de la <div>? Ou voulez-vous le style de la <input type="button">? Vous devez utiliser le bon sélecteur si vous voulez le dernier:

input[type=button] {
    color:#08233e;
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
    font-size:70%;
    /* ... other rules ... */
    cursor:pointer;
}

input[type=button]:hover {
    background-color:rgba(255,204,0,0.8);
}

Voir aussi:

InformationsquelleAutor Zeta

Voulez-vous quelque chose comme le violon!

HTML

<div class="button">
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)">
</div>

CSS

.button input[type="button"] {
    color:#08233e;
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
    font-size:70%;
    padding:14px;
    background:url(overlay.png) repeat-x center #ffcc00;
    background-color:rgba(255,204,0,1);
    border:1px solid #ffcc00;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border-bottom:1px solid #9f9f9f;
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    cursor:pointer;
    display:block;
    width:100%;
}
.button input[type="button"]:hover {
    background-color:rgba(255,204,0,0.8);
}

InformationsquelleAutor SVS

Float:left... Bien que je suppose que vous voulez l'entrée pour être style pas la div?

.button input{
    color:#08233e;float:left;
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
    font-size:70%;
    padding:14px;
    background:url(overlay.png) repeat-x center #ffcc00;
    background-color:rgba(255,204,0,1);
    border:1px solid #ffcc00;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border-bottom:1px solid #9f9f9f;
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    cursor:pointer;
}
.button input:hover{
    background-color:rgba(255,204,0,0.8);
}

InformationsquelleAutor Mike Hague

0

Le problème n'est pas avec le bouton, le problème est avec le div. Comme divs sont les éléments de bloc, par défaut occupant toute la largeur de leur élément parent (en règle générale, je suis assez sûr il y a des exceptions si vous êtes déconner avec les différents schémas de positionnement dans un document qui en serait la cause d'occuper toute la largeur d'un élément supérieur dans la hiérarchie).

De toute façon, essayez d'ajouter float: left; les règles pour la .button sélecteur. Qui sera la cause de la div avec classe button pour s'adapter autour du bouton, et vous permettra d'avoir plusieurs flottait divs sur la même ligne si vous voulais plus de div.buttons.

InformationsquelleAutor JAB
0

Essayer de mettre
```
Display:inline;
```
Dans le CSS.

InformationsquelleAutor Charlie

Vous devez vous connecter pour publier un commentaire.