Question 420361 in Html Question posted in
Some basic documentation can be found here.

Html – How do I put 2 buttons on one row,

How do I put 2 buttons on one row

I have 2 with svg and they don’t fit on the same line, does anyone have any ideas how to fix this?

      <div class="mobile-button-adapt">


      <button class="mobile-search-button">
      <div class="mobile-search">
      <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="38" height="38" rx="19" fill="#F5F5F5"/>
        <path d="M25.75 25.75L21.25 21.25M12.25 17.5C12.25 18.1894 12.3858 18.8721 12.6496 19.5091C12.9135 20.146 13.3002 20.7248 13.7877 21.2123C14.2752 21.6998 14.854 22.0865 15.4909 22.3504C16.1279 22.6142 16.8106 22.75 17.5 22.75C18.1894 22.75 18.8721 22.6142 19.5091 22.3504C20.146 22.0865 20.7248 21.6998 21.2123 21.2123C21.6998 20.7248 22.0865 20.146 22.3504 19.5091C22.6142 18.8721 22.75 18.1894 22.75 17.5C22.75 16.8106 22.6142 16.1279 22.3504 15.4909C22.0865 14.854 21.6998 14.2752 21.2123 13.7877C20.7248 13.3002 20.146 12.9135 19.5091 12.6496C18.8721 12.3858 18.1894 12.25 17.5 12.25C16.8106 12.25 16.1279 12.3858 15.4909 12.6496C14.854 12.9135 14.2752 13.3002 13.7877 13.7877C13.3002 14.2752 12.9135 14.854 12.6496 15.4909C12.3858 16.1279 12.25 16.8106 12.25 17.5Z" stroke="#422C1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      </div>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">

            
            <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="33" height="33" rx="16.5" fill="#422C1B"/>
              <line x1="8.68457" y1="11.4792" x2="24.4971" y2="11.4792" stroke="white" stroke-width="3.16667"/>
              <line x1="8.68457" y1="16.2917" x2="24.4971" y2="16.2917" stroke="white" stroke-width="3.16667"/>
              <line x1="8.68457" y1="21.1042" x2="24.4971" y2="21.1042" stroke="white" stroke-width="3.16667"/>
              </svg>

          </button>

Result

I tried with "flex: right" didn’t work out

Tags:

2

Answers


  1. 0

    I can recall two ways that you can do it:

    1 – In your css define this class for both buttons (or just refer the name of the ones you are using)

    <style>
        .inline-button{
            display: inline;
        }
</style>

    2 – Add a container for both buttons (Personal recommendation):

    <style>
        .button-container{
            display: flex;
            flex-direction: row;
        }
</style>
<div class="button-container">
    <button class="mobile-search-button inline-button">
        ....
    </button>
    <button class="navbar-toggler inline-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
        ....
    </button>
</div>
    Login or Signup to reply.
  2. 0

    Your html code is not properly written. Tags are closing abruptly.

    There are many ways you can achieve said requirement like: flexbox, grid, inline, inline-block, span etc

    I will suggest you to go through few html courses.

    .mobile-button-adapt button {
  display: inline-block;
}
    <div class="mobile-button-adapt">
  <button class="mobile-search-button">
    <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="38" height="38" rx="19" fill="#F5F5F5"/>
      <path d="M25.75 25.75L21.25 21.25M12.25 17.5C12.25 18.1894 12.3858 18.8721 12.6496 19.5091C12.9135 20.146 13.3002 20.7248 13.7877 21.2123C14.2752 21.6998 14.854 22.0865 15.4909 22.3504C16.1279 22.6142 16.8106 22.75 17.5 22.75C18.1894 22.75 18.8721 22.6142 19.5091 22.3504C20.146 22.0865 20.7248 21.6998 21.2123 21.2123C21.6998 20.7248 22.0865 20.146 22.3504 19.5091C22.6142 18.8721 22.75 18.1894 22.75 17.5C22.75 16.8106 22.6142 16.1279 22.3504 15.4909C22.0865 14.854 21.6998 14.2752 21.2123 13.7877C20.7248 13.3002 20.146 12.9135 19.5091 12.6496C18.8721 12.3858 18.1894 12.25 17.5 12.25C16.8106 12.25 16.1279 12.3858 15.4909 12.6496C14.854 12.9135 14.2752 13.3002 13.7877 13.7877C13.3002 14.2752 12.9135 14.854 12.6496 15.4909C12.3858 16.1279 12.25 16.8106 12.25 17.5Z" stroke="#422C1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
      <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="33" height="33" rx="16.5" fill="#422C1B"/>
        <line x1="8.68457" y1="11.4792" x2="24.4971" y2="11.4792" stroke="white" stroke-width="3.16667"/>
        <line x1="8.68457" y1="16.2917" x2="24.4971" y2="16.2917" stroke="white" stroke-width="3.16667"/>
        <line x1="8.68457" y1="21.1042" x2="24.4971" y2="21.1042" stroke="white" stroke-width="3.16667"/>
      </svg>
    </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search