CODEWITHSUNDEEP
htmlcss
Viv
Viv

Reputation: 49

Unable to align submit button alongside browse button

I am trying to align my upload button next to my browse button. I understand that it might be a simple problem but I have tried solutions like making it float but it did not work. This is my code for the buttons. 

<div style="width:80%; text-align:left;">
    <form enctype="multipart/form-data">      
        <label for="file" style="font-family:Arial;">Upload file:</label>
        <input type="file" name="file" id="file"/>
        <div class="button_cont">
             <a class="example_e">
                 <input type="submit" value="Upload" id="fileUpload" />
             </a>
        </div>                  
    </form>
</div>

I only have css for the upload button as I wanted to make it align first. 

.example_e [type='submit']{
    color: #20bf6b !important;
    text-transform: uppercase;
    background: #ffffff;
    padding: 20px;
    border: 4px solid #20bf6b !important;
    border-radius: 10px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}

.example_e:hover [type='submit']{
    color: #494949 !important;
    border-radius: 30px;
    border-color: #494949 !important;
    transition: all 0.3s ease 0s;
}

This is how it looks like at the moment. enter image description here

Upvotes: 0

Views: 345

Answers (2)

Moob
Moob

Reputation: 16184

The most basic solution is to make .button_cont display inline or inline-block:

.button_cont {display:inline-block;}

This will put the element inline with the others so long as there's enough space for it (else it will wrap underneath like all other inline elements.)

Demo:

.button_cont {display:inline-block;}

.example_e [type='submit'] {
  color: #20bf6b !important;
  text-transform: uppercase;
  background: #ffffff;
  padding: 20px;
  border: 4px solid #20bf6b !important;
  border-radius: 10px;
  display: inline-block;
  transition: all 0.3s ease 0s;
}

.example_e:hover [type='submit'] {
  color: #494949 !important;
  border-radius: 30px;
  border-color: #494949 !important;
  transition: all 0.3s ease 0s;
}
<div style="width:80%; text-align:left;">
  <form enctype="multipart/form-data">

    <label for="file" style="font-family:Arial;">Upload file:</label>
    <input type="file" name="file" id="file" />
    <div class="button_cont">
      <a class="example_e">
        <input type="submit" value="Upload" id="fileUpload" />
      </a>
    </div>
  </form>
</div>

However, Flexbox is probably the most flexible solution for this. In your case this is all you need:

form {display:flex; align-items:center;}

I highly recommend this Guide to Flexbox on css-tricks.com if you want to learn more about it.

Demo with flexbox:

form {
  display: flex;
  align-items: center;
}

.example_e [type='submit'] {
  color: #20bf6b !important;
  text-transform: uppercase;
  background: #ffffff;
  padding: 20px;
  border: 4px solid #20bf6b !important;
  border-radius: 10px;
  display: inline-block;
  transition: all 0.3s ease 0s;
}

.example_e:hover [type='submit'] {
  color: #494949 !important;
  border-radius: 30px;
  border-color: #494949 !important;
  transition: all 0.3s ease 0s;
}
<div style="width:80%; text-align:left;">
  <form enctype="multipart/form-data">

    <label for="file" style="font-family:Arial;">Upload file:</label>
    <input type="file" name="file" id="file" />
    <div class="button_cont">
      <a class="example_e">
        <input type="submit" value="Upload" id="fileUpload" />
      </a>
    </div>
  </form>
</div>

Upvotes: 2

Am_clifford
Am_clifford

Reputation: 1

You should try to use the flexbox properties to align your buttons visit this link I found it helpful https://developer.mozilla.org › CSS Web results Flexbox - Learn web development | MDN

Upvotes: 0

Related Questions