Make multiple div in one line, but can break new line auto-CodePudding

HTML structure is like the below:

<div class="visit">
   <label>Milieux:</label>
   <span>
       <div data-quickedit-field-id="node/419/field_environnement/fr/pdf">
              <div>Côtes &amp; plages</div>
              <div>Forêts &amp; boisés</div>
              <div>Lacs &amp; rivières</div>
              <div>Marais &amp; zones humides</div>
              <div>Monts &amp; vallées</div>
              <div>Terres agricoles</div>
              <div>Villes &amp; villages</div>
              <div>Zones volcaniques</div>
          </div>
   </span>
</div>

CSS is:

.visit {
display:flex;
}

label {
    min-width: 110px;
    float: left;
    font-weight: 900;
}

.visit > span {
    display: table-cell;
}

.visit > span > div > div {
    display: inline;
}

the body div is set as display:block;

In long text, it displays correctly:

But in short text, it's wrapped:

They display in web correctly. In our drupal page, we used a PDF generating tool, the result seems always different from the browser display.

CodePudding user response：

I do agree with dai a div should not be inside a span. Since you want it to break in the next line automatically and want everything to be on the same line maybe you can do something like this.

<div class="visit">
   <label>Milieux:</label>
   <div class="container" data-quickedit-field-id="node/419/field_environnement/fr/pdf" >
      <div class="item">Côtes &amp; plages</div>
      <div class="item">Forêts &amp; boisés</div>
      <div class="item">Lacs &amp; rivières</div>
      <div class="item">Marais &amp; zones humides</div>
      <div class="item">Monts &amp; vallées</div>
      <div class="item">Terres agricoles</div>
      <div class="item">Villes &amp; villages</div>
      <div class="item">Zones volcaniques</div>
   </div>
</div>

And the css will be like this:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item {
  display:flex;
}

label {
    min-width: 110px;
    float: left;
    font-weight: 900;
}

CodePudding user response：

Can be done easier with flex. Also, see Dai's comment re: span cannot contain div. Also, try not to use float.

.visit {
  display: flex;
  flex-wrap: wrap;
}
.label {
flex: 1 1 30%;
}
.data {
flex: 1 1 70%;
}
.data span {
  white-space: nowrap;
  margin-right: 1em;
}

<div class="visit">
  <div class="label">Milieux:</div>
  <div class="data" data-quickedit-field-id="node/419/field_environnement/fr/pdf">
    <span>Côtes &amp; plages</span>
    <span>Forêts &amp; boisés</span>
    <span>Lacs &amp; rivières</span>
    <span>Marais &amp; zones humides</span>
    <span>Monts &amp; vallées</span>
    <span>Terres agricoles</span>
    <span>Villes &amp; villages</span>
    <span>Zones volcaniques</span>
  </div>
</div>