1

I have a fieldset with a legend that has a text and a button. I am trying to have the button right align using flexbox, it works fine on Chrome but not on Firefox.

I got a minimum code working to show the problem:

main {
  width: 100%;
}

fieldset legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<main>
  <fieldset>
    <legend>
      Legend text
       <button type="button">
        Button text
      </button>
    </legend>
   </fieldset>
</main>

I want both both elements inside legend to be on the same line, as it showing on Chrome:
as working on chrome

But on Firefox i am getting the following result enter image description here

DCR
  • 14,737
  • 12
  • 52
  • 115
Jorgel
  • 920
  • 3
  • 14
  • 28

2 Answers2

4

just wrap what you need in a div and apply flex there

main {
  width: 100%;
}

 span {
  display: flex;
  justify-content: space-between;
  width: 100vw;
}
<main>
  <fieldset>
    <legend>
    <span>
      Legend text
       <button type="button">
        Button text
      </button>
      </span>
    </legend>
   </fieldset>
</main>
DCR
  • 14,737
  • 12
  • 52
  • 115
  • 1
    do not use a div but a span. only phrasing content and hx tags are allowed inside a legend . https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend & https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element – G-Cyrillus Aug 07 '20 at 21:14
0

Flexbox is not supported with fieldset elements. Float can easily do the job here:

fieldset legend {
  width: 100%;
}

fieldset legend button {
  float: right;
}
<fieldset>
  <legend>
    Legend text
    <button type="button">
            Button text
          </button>
  </legend>

</fieldset>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415