CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
svelteDev
svelteDev

Reputation: 127

InputText and Submit in one row

How to pass my submit button in one row with inputtext, that submit will be on the right side of the inputtext?

my code:

<div class="mt-12">
             <input
              id="grid-text"
              type="text"
              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
              placeholder="email"
            /> 
            <a
            href="#"
            class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
              >
                Run!
              </a>
          </div>

i need result like here

Upvotes: 0

Views: 27

Answers (2)

GBra 4.669
GBra 4.669

Reputation: 1689

there are multiple ways to achieve that. Your HTML alone (without CSS) would be rendered as a single row - because input is an inline-block tag and the anchor is an inline tag. However, something in your CSS is probably changing one of the two element's display property.

We could try to override this behaviour with flex from the parent element

mt-12 {
   display: flex;
   align-items: center; // only to make sure they look nice and centered
}

or simply making sure that the display property of both elements are display:

input, a {
  display: inline-block; // or inline, depending on your needs
}

Be careful that it seems that you are using helper classes, some helper classes (e.g. Boostrap helper classes) might have properties set with the !important flag hence hard to override. In that case it's better to just remove those un-wanted helper classes. You could also override the helper classes by setting the !important flag in your class too and have an higher CSS specificity - but that is a bad approach.

Upvotes: 0

novarx
novarx

Reputation: 525

You can use Input-Groups.

something like that:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>

Upvotes: 1

Related Questions