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

Bordure étrange sur la balise IMG Comment spécifier un classificateur dans la dépendance d'une dépendance progressive? Comment obtenir l'URL de la page en cours en C # [en double] Comment installer javadoc pour le package de compatibilité Android? Évitez les avertissements XML DOMDocument dans PHP Spring MVC - Pourquoi ne pas pouvoir utiliser @RequestBody et @RequestParam ensemble Comment une socket sait-elle quel contrôleur d'interface réseau utiliser?