How to align button with dropdown inline with other link anchor-CodePudding

`I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive

.top-section{
   padding-top: 2rem;
}
.btn-search{
   background-color: #EEEFEE;
   border-radius: 0px !important;
}
.fa-search{
   color: #8E8F8F;
}
.form-control{
   border-radius: 0px !important;
}
.link-end{
   text-align: end;
   display: flex;
    justify-content: end;
    align-items: baseline;
}
.first-link{
   margin-right: 2rem;
}
@media (max-width:991px) {
   .link-end{
      padding-top: 2rem;
   }
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
   <link rel="stylesheet" href="contact.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Print-Shop Contact</title>
</head>
<body>
   <div >
      <div >
         <div >
            <div >
               <div >
                  <input type="text" >
                  <div >
                    <button  type="button">
                      <i ></i>
                    </button>
                  </div>
                </div>
            </div>
           <!--Empty Div-->
           <div ></div>
           <!--End of Empty Div-->
            <div >
               <div >
                  <a href="#" >Help</a>
                  <div >
                     <button  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       Action
                     </button>
                     <div  aria-labelledby="dropdownMenuButton">
                       <a  href="#">Action</a>
                       <a  href="#">Another action</a>
                       <a  href="#">Something else here</a>
                     </div>
                   </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

I want the dropdown menu to be responsible. It only got irresponsible when I align both to inline. I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive

CodePudding user response：

To test the grid structure, I removed the styles that added margin and padding to the elements. Then I updated the columns for responsive design; see the reference document for the grid system to be displayed differently in different browser sizes.

.btn-search {
  background-color: #EEEFEE;
}

.fa-search {
  color: #8E8F8F;
}

.link-end {
  text-align: end;
  display: flex;
  justify-content: end;
  align-items: baseline;
}

.first-link {
 margin-right: 10px;
}

.customDropdownStyle{
  margin-right: 110px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 
    <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
    <link rel="stylesheet" href="contact.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print-Shop Contact</title>
  </head>
  <body>
    <div >
      <div >
        <div >
          <div >
            <input type="text" >
            <div >
              <button  type="button">
                <i ></i>
              </button>
            </div>
          </div>
        </div>
        
        <div ></div>
        
        <div >
          <div >
            <a href="#" >Help</a>
            
            <div >
              <button  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
              <div  aria-labelledby="dropdownMenuButton">
                <a  href="#">Action</a>
                <a  href="#">Another action</a>
                <a  href="#">Something else here</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

References

Grid system

CodePudding user response：

just update the css of this class .link-end add this line in the css align-items: flex-end;

check the link here of updated code. updated code