The anchor tag <a> is configured for inline display but is unexpectedly occupying the entire space

I am currently incorporating Bootstrap into my HTML, however, the <a> tag is behaving like a block display despite the fact that I have specified the CSS to be display:inline;

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
  <div class="card card-body bg-light">
    <div class="text-right">
      <a class="btn btn-success" href="#">Add Review</a>
    </div>
    <hr />
    <p> <strong>John </strong>- a tag is inline but it's still taking up the space</p>
    <a class="btn btn-xs btn-warning" href="#"> Edit Review </a>
    <form id="delete_button" action="routeToDelete" method="POST">
      <input class="btn btn-xs btn-danger" type="submit" value="Delete" >
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

https://i.stack.imgur.com/4UcD5.png I have attempted to set the id="delete_button" to display:inline, yet it does not align properly with the a tag. Upon inspecting the a tag, I discovered that the content was occupying the entire block (1042x24) in the developer tools. I also tried setting it to display:inline but saw no change.

The desired outcome is for the EDIT REVIEW and DELETE BUTTON to be on the same line, with both buttons being of equal size.

htmlcsstwitter-bootstrap

Answer №1

It seems like the 'Edit Review' button width is set to 100% using CSS (i.e. width:100%;). Without access to your complete code, it's challenging to pinpoint where this styling is coming from.

Possible culprits could be:

  • .btn-warning - This class is the primary suspect since it's specifically applied to the 'Edit Review' button in your provided example.

  • a, .btn, .btn-xs - These classes are less likely as they are used elsewhere in the same context without inheriting the 100% width style.

If you need further assistance, feel free to let me know so we can figure it out together.

Live Demo

To understand better, I've replicated your issue with some CSS and applied it to the suspected culprit .btn-warning. Additionally, I've shown how you can resolve it by either removing the problematic styling or overriding it with an alternative class.

.btn-warning {
  width: 100%;
}

.problem-fix {
  width: auto;
}

#delete_button {
  display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="card card-body bg-light">

  <h4>Current Issue</h4>
  
  <a class="btn btn-xs btn-warning" href="#"> Edit Review </a>
  
  <form id="delete_button" action="routeToDelete" method="POST">
    <input class="btn btn-xs btn-danger" type="submit" value="Delete">
  </form>

</div>

<hr>

<div class="card card-body bg-light">

  <h4>Demonstration of Solution</h4>
  
  <a class="btn btn-xs btn-warning problem-fix" href="#"> Edit Review </a>
  
  <form id="delete_button" action="routeToDelete" method="POST">
    <input class="btn btn-xs btn-danger" type="submit" value="Delete">
  </form>

</div>

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

Tips for positioning an MUI element inside a container to extend to the edge of the browser window

Currently, I'm working on a project with a Material-UI (MUI) container that contains a Stack element. Within this Stack, there are two Box elements displayed in a row, each set to take up 50% of the width. In my design, I want the second box to break ...

htmlcssreactjsmaterial-ui

Ways to align one child to the end without affecting any other elements

I'm attempting to position only div3 at the flex-end of .app. If I use this code: .app { display: flex; flex-direction: column; height: 100vh; justify-content: flex-end; } Div3 goes where I want it, but everything else also moves dow ...

htmlcss

Steps to include a HTML webpage within another page

I need assistance with a scenario involving two separate HTML pages on different servers. Merchant Form - Server A Payment Form - Server B Here's the desired scenario: The user completes all necessary fields on the Merchant Form and clicks submit. ...

javascripthtmljqueryajax

Having trouble transferring my background image from my FTP to my website

I'm having trouble setting a background image for the header on my website. It seems that nothing is loading. The hosting service I use has disabled linking images via external URLs, so I tried uploading the image to Filezilla, but that didn't wo ...

htmlcssftp

Adjust the class of the iframe element when clicked

I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have: Here is a snippet from my index.htm ...

javascriptjquerycsshtmliframe

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

I need help redirecting to a new page upon button click using a JS function. The URL needs to include an email address parameter. <form> <input type="email" id="mail" placeholder="ENTER YOUR EMAIL ADDRESS" requir ...

javascripthtml

Immersive pop-up interface displaying a variety of embedded videos simultaneously

I am a beginner in JavaScript and I came across a CodePen that does exactly what I need, but it currently only works for one embedded video. What I aim to achieve is similar functionality, but with 6 videos. (function ($) { 'use strict'; ...

javascripthtmlcsspopupcodepen

A way to insert a line break in an HTML document without using the <br> tag is

<div id="unique_1" class="unique" style={{display:"flex"}} > <div class="item1">11</div> <div class="item2">77</div> <div class="item3">22</div&g ...

cssreactjsflexboxinline

Ways to display scrollbar even when inner container lacks fixed height within a fixed position outer container

I am trying to display a scrollbar in an inner container without specifying a fixed height, while the outer container has a fixed position. However, I am encountering an issue where setting a fixed height for the innerContainer results in content being hid ...

htmlcssreactjsscrollbarcss-position

The Ruby on Rails application is having trouble detecting the stylesheet in the assets

I'm having some trouble displaying a border on my buttons. The button styles are defined in the app/assets/stylesheets/modules/_buttons.scss file, which I have imported into application.scss. @import "bootstrap-sprockets"; @import "bootstrap"; //m ...

cssruby-on-railstwitter-bootstrap

Utilize VBA in Excel to interact with a jQuery button on a web page

Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...

jqueryexcelhtmlvba

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

javascriptjqueryhtmlcss

conceal a component within a different container

Is there a way to hide or show an element within a container based on the hover state of another container? Here is an example of what I have tried so far: HTML5 <div class="left-menu-container"> <div class="left-menu-inner-container"> ...

htmlcss

Conceal an element if the angular attribute does not contain any value

Currently, I am facing an issue with an image element in my project. The path for this image is being fetched from an attribute present on my angular object. However, if this imagePath attribute is empty, a broken image is displayed. I want to avoid rend ...

htmltwitter-bootstrapangularjs

File bootstrap.min.css is currently experiencing compatibility issues

I am currently working on a website where I have two images that are displaying vertically. However, I would like these images to be displayed horizontally with animation. I attempted to use Bootstrap to achieve this horizontal layout, but when I include ...

javascripthtmlcsstwitter-bootstrap

What is the best way to create a footer in this scenario and is there a method to perfectly center an

What is the best way to position the footer at the bottom of the page without overlapping the top content? Is there a method to center both the height and width of the header element on the page? Can you review the layout of this webpage and provide feed ...

htmlcsslayoutfrontendfooter

Identifying child elements in jQuery with identical IDs

Consider this HTML setup: <div id="contentRead"> ... <div id="List"></div> </div> ... <div id="contentWrite"> ... <div id="List"></div> </div> ...

javascriptjqueryhtml

scraping mixed content from an HTML span using Selenium and XPath

Currently, I am attempting to extract information from a span element that contains various content. <span id="span-id"> <!--starts with some whitespace--> <b>bold title</b> <br/> text here that I want to grab.... < ...

htmlseleniumselenium-webdriverxpath

Unable to Trigger Jquery Scroll Event

I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...

jqueryhtmlcssscroll

Is there a quick way to import all available font weights from a Google font?

I am looking to experiment with importing all weights and styles of a Google font, such as Roboto or Roboto Slab, in a CSS file. Is there a more efficient way to do this rather than listing out each individual style in the @import? ...

cssgoogle-fonts