How to Insert a Hyperlink Beside a Button Using HTML and CSS

Is there a way to add a link next to the button on the right side of the screen, and keep them on the same line? I've tried different methods but the link always ends up being displayed above or below the button.

.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 class="dropdown show"><a id="dropdownMenuLink" class="btn btn-secondary dropdown-toggle" role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
    <a class="dropdown-item" href="#">Link 4</a></div>
</div>

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

htmlcss

Answer №1

One convenient alternative to achieving the same effect with your css would involve giving the paragraph a position absolute and setting its top and right properties 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 class="dropdown show"><a id="dropdownMenuLink" class="btn btn-secondary dropdown-toggle" role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
    <a class="dropdown-item" href="#">Link 4</a></div>
</div>

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

Answer №2

To achieve a specific placement on the document for your link, you can utilize absolute positioning. By setting right:0px, the link will align to the right side of the webpage. To move the link closer to the top, set the margin-top css property as a negative value of your font size. This will position the link on the same line as the dropdown menu link. If your font size is 1em, update your code with the following: 

     .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 class="dropdown show"><a id="dropdownMenuLink" class="btn btn-secondary dropdown-toggle" role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
    <a class="dropdown-item" 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Expand Your BlackBerry Webworks App Beyond the Limits of Width and Height with Scrolling

The initial structure of the mobile application consists of: The basic HTML layout is as follows: <div id="title">Title</div> <div id="tabs">Some tabs</div> <div id="container" x-blackberry-focusable="true"> <div id="cont ...

jqueryhtmlcssblackberry-webworks

What steps do I need to follow in order to incorporate the SQLite database into my application?

My attempt to establish a database connection with my system is met with an issue where, upon calling the function, the application's browser displays this message: The "granjas" table is empty Below is the code snippet for reference: In JavaScript ...

javascripthtmlsqlite

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

Hello everyone, I am looking to have my vertical menu slide from right to left instead of the typical top to bottom sliding that comes with using .toggle() in jQuery. Specifically, when the hamburger menu is clicked, I want the menu to slide out from right ...

javascriptjqueryhtmlcsshamburger-menu

Designing the autocomplete dropdown feature in Bootstrap UI

I'm currently developing an app that is utilizing AngularJS and Bootstrap, with the assistance of Bootstrap UI. Specifically, I am working on implementing the typeahead feature. However, I am facing a challenge in trying to ensure that the dropdown li ...

cssangularjstwitter-bootstrap

What could be causing the malfunction of this Bootstrap button dropdown?

Initially, I attempted using regular HTML for the dropdown button but encountered issues. As a result, I switched to jsfiddle to troubleshoot. Despite my efforts, the dropdown feature still refused to work. If you'd like to take a closer look, here&a ...

javascripthtmlcsstwitter-bootstrap

What is the best way to remove a selected item from an array in Vuejs when it has been clicked

I'm having trouble with my splice() method in this simple To-Do app. I want to delete a specific task by clicking a button, but the solutions I've tried from Stack Overflow aren't working for me. The items do get deleted, but only the last o ...

javascripthtmlarraysvue.jsweb

What is the correct way to display or hide a button based on my specific situation?

Creating a 'show more' button for my app has presented me with a challenge. I am using a directive to handle actions when the user clicks on the read more button: (function(window, angular) { var app = angular.module('myApp'); ...

javascripthtmlangularjs

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

cssangularwebkendo-ui

issues with the functionality of bootstrap modal

I'm currently working on a project where I need to set up a modal popup using bootstrap. The website I'm working on is organized by departments, so the only part of the code that I have control over is the main body of the site. I have included t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Center align the text inside a table cell of a span that is floated to the right and has a varying

Struggling to align a span vertically in the middle with a different font size than its table cell. The goal is to have the following layout: | | | Measurement (font-size: 100%) unit (font- ...

htmlcsscss-float

Why isn't the page being redirected when attempting to use JavaScript with window.location and window.location.href?

Currently, I have implemented a login system on my website. The process involves triggering an ajax request to a designated PHP script upon the user clicking the submit button. This script is responsible for logging in the user and responding with the mess ...

javascriptphphtmlajaxhttp-redirect

Issue with Displaying Full-Page Div

My HTML page consists of just one div. The body code is as follows: <div> </div> Here is the corresponding CSS: body { margin:0; height:100vh; width:100vh; } div { height:100vh; width:100vh; color:#000000; } I c ...

csshtml

What could be causing CSS to fail in rendering on Chrome while functioning properly in Eclipse?

I am currently facing an issue with my application where CSS is rendering correctly inside Eclipse but not in the Chrome browser when using JSF for the front end. I have included the CSS file in JSF as shown below. Can anyone help me identify the problem ...

cssjsf

Traverse Through Every Column of an HTML Table and Retrieve the Information with jQuery

Trying to extract data from within the <tbody> tags in an HTML table. The structure of each row is as follows: <tbody> <tr> <td>63</td> &l ...

jqueryhtmlloopsforeach

What is the best way to extract numbers from a string using JavaScript?

I am working with a string in javascript that looks like this: var xyz= "M429,100L504.5,100L504.5,106L580,106L570,98M580,106L570,114"; My goal is to extract the numbers and store them in an array. I attempted the following code: var x=xyz.match(/\ ...

javascripthtmlregexjspextjs

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...

javascriptphpjqueryhtml

Submitting forms using Jquery Mobile

Hi there! I need some assistance with a form that I have created for use with phonegap. I was initially using JavaScript to process it, but now I'm considering switching to jQuery for better functionality. My main goal is to display the "total" in a n ...

jqueryhtmlformscordova

Prevent secret select fields from being submitted within a form

In my interface, there are a couple of dropdowns where a user can select the first option and based on that selection, a new dropdown will appear. Currently, when posting the form, all the select dropdown values are included in the post data, even the hid ...

javascriptjqueryhtml

JavaScript embedded in an HTML document, which in turn is embedded within JavaScript

Is it possible to nest tags within other tags to control the functionality of a download button in a chat bot? Unfortunately, nesting tags is not allowed, so I'm looking for an alternative solution. Below is the complete HTML file I'm working wit ...

javascripthtmlbootstrap-5

Execute the javascript code when the radio button is selected

For my Rails app, I want a straightforward feature where a JavaScript function runs only if a radio button has been selected. The user should be presented with multiple radio buttons without any default selection. Upon clicking a "Run" button, the followin ...

javascriptjqueryhtmlruby-on-rails