Add Link Next to Button in HTML/CSS-CodePudding

I want to add a link next to the button on the right side of the screen, on the same line. I've tried various methods, but they all result in the link shown a line above or under.

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #171515;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

<div ><a id="dropdownMenuLink"  role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</a>
  <div  aria-labelledby="dropdownMenuLink">
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a></div>
</div>

<p><a href="#">Link on the right side</a></p>

CodePudding user response：

The easier and similar way to your css would be to give the paragraph position absolute, set top and right to 0.

    .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #171515;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

#right-link{
position: absolute;
top: 0;
right: 0;
}

<div ><a id="dropdownMenuLink"  role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</a>
  <div  aria-labelledby="dropdownMenuLink">
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a></div>
</div>

<p id="right-link"><a href="#">Link on the right side</a></p>

CodePudding user response：

You could absolute-position your link, which would allow you to place it in a specific position on the document. Setting right:0px will allow you to align it to the right of the webpage. If you set the margin-top css property to the negative of your font-size, the link will be placed one line closer to the top of the webpage (or one line back from the default position). Since the default position is one line after the previous link, this will set your link to be on the same line as the link dropdown menu. Assuming your font is 1em, your updated code should be:

     .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      display: none;
      float: left;
      min-width: 160px;
      padding: 5px 0;
      margin: 2px 0 0;
      font-size: 14px;
      text-align: left;
      list-style: none;
      background-color: #171515;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      border: 1px solid #ccc;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 4px;
      -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
      box-shadow: 0 6px 12px rgba(0,0,0,.175);
    }

   <div ><a id="dropdownMenuLink"  role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</a>
  <div  aria-labelledby="dropdownMenuLink">
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a></div>
</div>
<p style="position:absolute;right:0px;margin-top:-1em"><a href="#" style="">Link on the right side</a></p>