Dev Faq
0
votes

Puis-je positionner un bouton à côté d'un pré?

J'ai du code HTML généré à partir d'une macro Editeur de texte. La sortie ressemble à quelque chose comme ceci: xxx pré>

Le seul CSS que j'ai actuellement appliqué à l'un de ces éléments jusqu'à présent est sur le pré code>: p> 

pre {
    padding: 8pt;
    overflow: auto;
    margin: 1.2em;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

pre.src {
    position: relative;
    overflow: auto;
    padding-top: 1.2em;
}

3 commentaires

oui cela est possible, pourriez-vous nous fournir le CSS appliqué aux éléments?, il est vraiment utile de savoir ce que CSS .Source-block et .src-conteneur ont

L'extrait que vous fournissez peut être placé en une ligne avec un simple "conteneur-conteneur {float: gauche}", mais vous aurez déjà du CSS sur votre page qui pourrait annuler cela. Donc, sans un exemple de travail minimal de votre côté, il sera difficile d'aider.

Le problème que je ne semble pas sembler se déplacer est que le bouton s'affiche sous le pré

4 Réponses :

0
votes

Définissez toute la classe nommée SRC-Contener. xxx

ou, définissez le bouton unique. xxx

1 commentaires

Pourriez-vous également ajouter une explication?

0
votes

Une solution simple serait d'utiliser Float: laissé sur le conteneur SRC pour rendre le bouton aller à la droite de celui-ci. Vous pouvez également utiliser Float: directement sur la copie. Ceux-ci rendent les éléments de blocs vont à côté de l'autre.

p> 

<div class='source-block'>

  <div class="src-container">
    <pre class="src bash">sudo apt update</pre>
  </div>

  <button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>

</div>

2 commentaires

Je viens de mettre à jour ma question avec quelques CSS supplémentaires qui sont déjà appliquées sur mon pré. Cela change-t-il votre réponse? J'ai des difficultés à éliminer tous les HTML / CSS non pertinents et à faire un petit exemple reproductible et précis.

J'ai ajouté la CSS de votre question à la réponse, mais le bouton Copier est toujours à côté du conteneur, bien que la hauteur soit un peu différente due au remplissage de remplissage: 1.2em; Avez-vous vérifié si le flotteur: laissé fonctionne sur votre page?

0
votes

solution la plus facile: déplacez le bouton avant le .src-conteneur code> et flottez-le. 

.copyBtn {
    position: absolute;
    top: 10px; right: 10px;
}

0 commentaires
1
votes

Vous pouvez utiliser Flexbox pour positionner le flux de l'élément enfant dans le Block source code> (parent). Vous pouvez l'utiliser pour les mettre à côté les uns des autres et positionner la position verticale avec Align-items: Centre; Code>

Plus sur FLEXBOX Ici: https://developer.mozilla.org/en-us/docs/learn/css/css_layout/flexbox a > p>

puis-je utiliser flexbox (support de navigateur): https://caniuse.com/#feat=flexbox p>

P> 

<div class="source-block">

  <div class="src-container">
    <pre class="src bash">sudo apt update</pre>
  </div>

  <button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>

</div>

2 commentaires

Cela fonctionne pour moi! Merci! Savez-vous si je peux également aligner le bouton au début du pré avec flex? C'est-à-dire, mettez le bouton vers le haut pour un gros Source-Block .

Vous pouvez jouer un peu avec align-auto et align-items . Ne devrait pas être trop difficile, il y a de superbes ressources sur Flexbox Online :-)

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor