html - Right aligning a button in a form

I'm trying to push the button in a form to the right using CSS but whatever I tried has failed so far. Where am I making a mistake in the following code? I thought float: right would work but it doesn't seem to work. I also tried adding clear: both; to no avail.

Also, I don't want all my buttons to be on the right. I just want it if it's used in a div with form-field class.

Where am I making a mistake here?

.two-cols-one-one {
   display: grid;
   grid-gap: 1.5em;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
      "col-left col-right";
}

.col-left {
   grid-area: col-left;
   width: 100%;
   height: 100%;
   padding: 1em;
}

.col-right {
   grid-area: col-right;
   width: 100%;
   height: 100%;
   padding: 1em;
}

.form-field {
   display: grid;
   justify-content: start;
   align-items: start;
   padding: 0.3em 0.5em;
}

.form-field label {
   justify-content: inherit;
   align-items: inherit;
   margin-left: 0.7em;
   margin-bottom: 0.3em;
   font-family: inherit;
   font-size: 0.5em;
   font-weight: 700;
   text-transform: uppercase;
}

.form-field button {
   margin-top: 2em;
   float: right;
}

<div class="two-cols-one-one">
     <div class="col-left">
        <div class="form-field">
           <label>Name</label>
           <input />
        </div>
        <div class="form-field">
           <label>Address</label>
           <input />
        </div>
     </div>
     <div class="col-right">
        <div class="form-field">
           <label>State</label>
           <select>
              <option value="">Please select one</option>
              <option value="AK">Alaska</option>
              <option value="WY">Wyoming</option>
           </select>
        </div>
        <div class="form-field">
           <button class="btn btn-primary">Submit</button>
        </div>
     </div>
  </div>

Also, I don't want all my buttons to be on the right. I just want it if it's used in a div with form-field class.

Where am I making a mistake here?

.two-cols-one-one {
   display: grid;
   grid-gap: 1.5em;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
      "col-left col-right";
}

.col-left {
   grid-area: col-left;
   width: 100%;
   height: 100%;
   padding: 1em;
}

.col-right {
   grid-area: col-right;
   width: 100%;
   height: 100%;
   padding: 1em;
}

.form-field {
   display: grid;
   justify-content: start;
   align-items: start;
   padding: 0.3em 0.5em;
}

.form-field label {
   justify-content: inherit;
   align-items: inherit;
   margin-left: 0.7em;
   margin-bottom: 0.3em;
   font-family: inherit;
   font-size: 0.5em;
   font-weight: 700;
   text-transform: uppercase;
}

.form-field button {
   margin-top: 2em;
   float: right;
}

<div class="two-cols-one-one">
     <div class="col-left">
        <div class="form-field">
           <label>Name</label>
           <input />
        </div>
        <div class="form-field">
           <label>Address</label>
           <input />
        </div>
     </div>
     <div class="col-right">
        <div class="form-field">
           <label>State</label>
           <select>
              <option value="">Please select one</option>
              <option value="AK">Alaska</option>
              <option value="WY">Wyoming</option>
           </select>
        </div>
        <div class="form-field">
           <button class="btn btn-primary">Submit</button>
        </div>
     </div>
  </div>

Share Improve this question asked Mar 27 at 1:29 Sam 30.6k76 gold badges252 silver badges464 bronze badges

Add a comment |

5 Answers 5

Sorted by: Reset to default 2

It looks like the problem is with justify-content property of form-field class as it's set to start and is applied to both select and the submit button. One way you can fix it is by overriding this property. See below code for corrected version:

.two-cols-one-one {
            display: grid;
            grid-gap: 1.5em;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "col-left col-right";
        }

        .col-left {
            grid-area: col-left;
            width: 100%;
            height: 100%;
            padding: 1em;
        }

        .col-right {
            grid-area: col-right;
            width: 100%;
            height: 100%;
            padding: 1em;
        }

            .form-field {
            display: grid;
            justify-content: start;
            align-items: start;
            padding: 0.3em 0.5em;
            }

            .form-field label {
            justify-content: inherit;
            align-items: inherit;
            margin-left: 0.7em;
            margin-bottom: 0.3em;
            font-family: inherit;
            font-size: 0.5em;
            font-weight: 700;
            text-transform: uppercase;
            }

            .form-field button {
            margin-top: 2em;
            float: right;
            }
            
            .submit-wrapper {
                justify-content: end;
            }

<div class="two-cols-one-one">
        <div class="col-left">
           <div class="form-field">
              <label>Name</label>
              <input />
           </div>
           <div class="form-field">
              <label>Address</label>
              <input />
           </div>
        </div>
        <div class="col-right">
           <div class="form-field">
              <label>State</label>
              <select>
                 <option value="">Please select one</option>
                 <option value="AK">Alaska</option>
                 <option value="WY">Wyoming</option>
              </select>
           </div>
           <div class="form-field submit-wrapper">
              <button class="btn btn-primary">Submit</button>
           </div>
        </div>
     </div>

First, remove float because it don't work in grid. All .form-fields have justify-content: start you need:

justify-content: end when a .form-field has a button or...
apply position: absolute and justify-self: right on button

Note: These two OPTIONs are the only change needed, the HTML stays the same.

/* OPTION A */
.form-field button {
  margin-top: 2em;
}

/* OPTION A */
.form-field:has(button) {
  justify-content: end;
}

/* OR */

/* OPTION B */
.form-field button {
  position: absolute;
  justify-self: end;
  margin-top: 2em;
}

Note: in the example there are 2 separate OPTIONs they are a little bit different than the code above. This was done to save space. Just apply the code above so you don't have to change your HTML.

.two-cols-one-one {
  display: grid;
  grid-gap: 1.5em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "col-left col-right";
}

.col-left {
  grid-area: col-left;
  width: 100%;
  height: 100%;
  padding: 1em;
}

.col-right {
  grid-area: col-right;
  width: 100%;
  height: 100%;
  padding: 1em;
}

.form-field {
  display: grid;
  justify-content: start;
  align-items: start;
  padding: 0.3em 0.5em;
}

.form-field label {
  justify-content: inherit;
  align-items: inherit;
  margin-left: 0.7em;
  margin-bottom: 0.3em;
  font-family: inherit;
  font-size: 0.5em;
  font-weight: 700;
  text-transform: uppercase;
}

.form-field button {
  margin-top: 2em;
}

.form-field:has(.optionA) {
  justify-content: end;
}

.form-field .optionB {
  position: absolute;
  justify-self: end;
}

<div class="two-cols-one-one">
  <div class="col-left">
    <div class="form-field">
      <label>Name</label>
      <input />
    </div>
    <div class="form-field">
      <label>Address</label>
      <input />
    </div>
  </div>
  <div class="col-right">
    <div class="form-field">
      <label>State</label>
      <select>
        <option value="">Please select one</option>
        <option value="AK">Alaska</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
    <div class="form-field">
      <button class="optionA">OPTION A</button>
    </div>
    <div class="form-field">
      <button class="optionB">OPTION B</button>
    </div>
  </div>
</div>

Float doesn't work because the button is a grid item. Float only works in flow (i.e. block and inline) layout.

One way to achieve what you want is to use justify-items rather than justify-content for your .form-field elements. Then you can use justify-self:end on the button to position it on the right.

.two-cols-one-one {
   display: grid;
   grid-gap: 1.5em;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
      "col-left col-right";
}

.col-left {
   grid-area: col-left;
   width: 100%;
   height: 100%;
   padding: 1em;
}

.col-right {
   grid-area: col-right;
   width: 100%;
   height: 100%;
   padding: 1em;
}

.form-field {
   display: grid;
   justify-items: start;
   align-items: start;
   padding: 0.3em 0.5em;
}

.form-field label {
   justify-content: inherit;
   align-items: inherit;
   margin-left: 0.7em;
   margin-bottom: 0.3em;
   font-family: inherit;
   font-size: 0.5em;
   font-weight: 700;
   text-transform: uppercase;
}

.form-field button {
   margin-top: 2em;
   justify-self: end;
}

<div class="two-cols-one-one">
     <div class="col-left">
        <div class="form-field">
           <label>Name</label>
           <input />
        </div>
        <div class="form-field">
           <label>Address</label>
           <input />
        </div>
     </div>
     <div class="col-right">
        <div class="form-field">
           <label>State</label>
           <select>
              <option value="">Please select one</option>
              <option value="AK">Alaska</option>
              <option value="WY">Wyoming</option>
           </select>
        </div>
        <div class="form-field">
           <button class="btn btn-primary">Submit</button>
        </div>
     </div>
  </div>

Remove "justify-content: start" from the "form-field" class. Add "margin-left: auto" to "btn-primary". This will fix this alignment.

float: right; is fine, just adjust your css grid directives...

html {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
form {
  display               : grid;
  padding               : .7em;
  grid-gap              : .7em 1.4em;
  grid-template-columns : repeat(2, 12em);
  grid-template-rows    : repeat(2, 2.8em);
  grid-auto-flow        : column dense;
  }
label {
  display     : block;
  font-style  : oblique;
  font-size   : .9em;
  background  : whitesmoke;
  font-weight : bold;
  }
label * {
  display     : block;
  font-weight : normal;
  }
label:has(button):before { /* add an empty line */
  display : inline-block;
  width   : 100%;
  content : '';
  } 
label button {
  float  : right;
  }

<form>
  <label>
    Name
    <input />
  </label>
  <label>
    Address
    <input />
  </label>
  <label>
    State
    <select>
      <option value="" selected disabled>Please select one</option>
      <option value="AK">Alaska</option>
      <option value="WY">Wyoming</option>
   </select>
  </label>
  <label>
    <button>Submit</button>
  </label>
</form>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Right aligning a button in a form - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)