Question Styling CSS pour un bouton: Utiliser

J'essaie de styliser un bouton en utilisant <input type="button"> au lieu de juste <button>. Avec le code que j'ai, le bouton s'étend tout le long de l'écran. Je veux juste pouvoir l'adapter au texte qui se trouve dans le bouton. Des idées?

Voir le Exemple jsFiddle ou continuez vers le 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>


26
2018-06-15 15:16


origine


Réponses:


Dans ton .button CSS, essayez display:inline-block. Regarde ça JSFiddle


10
2018-06-15 15:23



Voulez-vous vraiment styler le <div>? Ou voulez-vous styliser la <input type="button">? Vous devez utiliser le bon sélecteur si vous souhaitez que ce 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 également:


60
2018-06-15 15:24



Voulez-vous quelque chose comme le donné 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);
}

6
2018-06-15 15:21



Float:left... Bien que je suppose que vous voulez que l'entrée soit stylée non 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);
}

1
2018-06-15 15:21



Le problème n'est pas avec le bouton, le problème est avec le div. Comme divs sont des éléments de bloc, ils occupent par défaut toute la largeur de leur élément parent (en règle générale, je suis sûr qu'il y a des exceptions si vous manipulez des schémas de positionnement différents dans un document et que cela les occuperait) la largeur totale d'un élément supérieur dans la hiérarchie).

Quoi qu'il en soit, essayez d'ajouter float: left; aux règles pour le .button sélecteur. Cela provoquera la div avec classe button pour contourner le bouton, et vous permettrait d'avoir plusieurs flotté divs sur la même ligne si vous vouliez plus div.buttons.


0
2018-06-15 15:21



Essayer de mettre

Display:inline;

Dans le CSS.


0
2018-06-15 15:22



Questions populaires

Comment puis-je obtenir un nom de fichier à partir d'un chemin complet avec PHP? L'installation des rails Ubuntu échoue sur zlib Typesafe varargs en C avec gcc Problème de chargement d'un XIB séparé pour iPad ou iPhone Quand dois-je remplacer les méthodes d'égalité et de hashcode? [dupliquer] Regex: comment faire correspondre le dernier point d'une chaîne Combiner deux listes et supprimer les doublons sans supprimer les doublons dans la liste d'origine