HTML tag not breaking after element-CodePudding

Here is my code. I believe there is something interfering or because of the bootstrap

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.recordbuttons {
  display: flex;
  color: gray;
}

.PropMButtons {
  color: black;
  padding: 5px;
  margin: 5px 3px 40px;
}

#properties {
  padding: 20px;
  margin-top: -15px;
  background-color: aliceblue;
  border: 1px solid black;
}

<form name="properties" id="properties">
  <div >
    <button type="button" >Save</button>
    <button type="button" >Cancel</button>
    <button type="button" >First Record</button>
    <button type="button" >Next Record</button>
    <button type="button" >Previous Record</button>
    <button type="button" >Last Record</button><br>
  </div><br>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname">
</form>

I played around with the HTML and CSS with no success. I am using bootstrap as well so could be that there is some interference

CodePudding user response：

The   tag will not break after an element if the element has a display: flex style applied to it, as is the case in your code. This is because a flex container doesn't allow line breaks within its content by default.

To fix this issue, you can change the display property of the .recordbuttons class to inline-flex, which will allow the   tag to break after the element. Here is an example:

.recordbuttons {
    display: inline-flex;
    color: gray;
}

Alternatively, you can remove the display: flex style from the .recordbuttons class, and use the   tag to break between the buttons instead of after the buttons. Here is an example:

<form name="properties" id="properties">
        <div >
          <button type="button" >Save</button>
          <button type="button" >Cancel</button><br>
          <button type="button">First Record</button><br>
        <button type="button" >Next Record</button><br>
        <button type="button" >Previous Record</button><br>
        <button type="button" >Last Record</button>
      </div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
</form>

This will produce the same layout as before, but the   tags will break between the buttons instead of after them.