web-dev-qa-db-fra.com

Comment mettre deux div sur la même ligne avec CSS en simple_form dans rails?

Mettre deux div sur la même ligne est une vieille question. Mais je ne trouve pas de solution lorsque je travaille avec simple_form dans Rails. Ce que je veux faire, c'est afficher le contenu et son étiquette sur la même ligne. La largeur de l'étiquette est de 125 pixels (.left) et le contenu est à droite (.right). Le texte de l'étiquette est aligné à droite et le texte du contenu est aligné à gauche.

Voici le HTML:

<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
    <div style="margin:0;padding:0;display:inline">
        <input type="hidden" value="✓" name="utf8">
        <input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
    </div>
    <div class="left">Proj Name：</div>
    <div class="right">must have a name</div>
    <div class="input string required">

Voici le CSS:

.simple_form div.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline;
}

.simple_form div.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline;
}

Cependant, dans le résultat, il y a un saut de ligne, comme ceci:

Proj Name：
must have a name

Le code erb du formulaire simple est:

<div class="left">Proj Name：</div><div class="right"><%= @project.name %></div>

Je ne veux pas utiliser un tableau mais CSS uniquement pour résoudre le problème.

htmlcssruby-on-railserbsimple-form
7
user938363

Votre CSS est très bien, mais je pense qu'il ne s'applique pas aux divs. Écrivez simplement un nom de classe simple et essayez. Vous pouvez le vérifier sur Jsfiddle .

.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline;
}

.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline;
}
25
ap.singh

Tu ne peux pas flotter ou définissez la largeur de un élément en ligne. Retirer display: inline; des deux classes et votre balisage devrait bien se présenter.

EDIT: Vous pouvez définir la largeur, mais cela entraînera le rendu de l'élément sous forme de bloc.

3
Alexander Christiansson

pourquoi ne pas utiliser flexbox? alors enveloppez-les dans une autre div comme ça

.flexContainer { 
   
  margin: 2px 10px;
  display: flex;
} 

.left {
  flex-basis : 30%;
}

.right {
  flex-basis : 30%;
}
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
    <div style="margin:0;padding:0;display:inline">
        <input type="hidden" value="✓" name="utf8">
        <input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
    </div>
    <div class="flexContainer">
      <div class="left">Proj Name：</div>
      <div class="right">must have a name</div>
    </div>
    <div class="input string required"> </div>
 </form>

n'hésitez pas à jouer avec le pourcentage de base flexible pour obtenir plus d'espace personnalisé.

1
a. mahdo