Having trouble getting two divs to align on the same line using the 'inline' method

Question

Having trouble getting two divs to align on the same line using the 'inline' method

I am struggling to align multiple buttons within divs on the same line. Two of these buttons should only be displayed when a specific value is greater than 0. I attempted using display:inline-block in a container div, along with style="float:right", but it did not work as expected. I also tried adding display=inline to each button individually but that was unsuccessful. Here is my HTML code:

<div style="display:inline-block" style="float: right;">
    <div *ngIf="menu.itemNumber > 0">
        <button pButton type="button" label="Download" icon="fa-wrench" iconPos="left" (click)="Download();"></button>
        <button pButton type="button" label="Upload" icon="fa-wrench" iconPos="left" (click)="Upload()"></button>
    </div>
    <button pButton type="button" style="float: right;" label="Delete" icon="fa-wrench" iconPos="left" (click)="Delete()"></button> 
</div>

Can anyone help me understand why the buttons are not appearing on the same line?

html css

Answer 1

Answer №1

The reason for this issue is that the div inside has a default display property of block. You can solve this by applying display:inline-block to all elements within the parent button div.

Code Snippet:

.main>* {
  display: inline-block;
}

<div class="main">
  <div>
    <button></button>
    <button></button>
  </div>
  <button></button>
</div>

Answer 2

The reason for this issue is that the div inside has a default display property of block. You can solve this by applying display:inline-block to all elements within the parent button div.

Code Snippet:

.main>* {
  display: inline-block;
}

<div class="main">
  <div>
    <button></button>
    <button></button>
  </div>
  <button></button>
</div>

Answer 3

Answer №2

Make sure to update the styling of your inner div (

<div *ngIf="menu.itemNumber > 0">

) so that it becomes an inline-block element in order to align with the button that follows.

Additionally, avoid duplicating the style property on your wrapper div. Consolidate the styles into one string like this:

style="display:inline-block; float: right;"

(assuming you still require the outer div to be set as inline-block - this may not be necessary).

Answer 4

Make sure to update the styling of your inner div (

<div *ngIf="menu.itemNumber > 0">

) so that it becomes an inline-block element in order to align with the button that follows.

Additionally, avoid duplicating the style property on your wrapper div. Consolidate the styles into one string like this:

style="display:inline-block; float: right;"

(assuming you still require the outer div to be set as inline-block - this may not be necessary).

Answer 5

Answer №3

One valuable lesson I gained was the importance of considering the size of content within buttons or adjacent elements. It is possible for these elements to not align on the same baseline, causing some to appear higher than others when placed side by side. To address this issue, one effective approach is to apply a specific overflow property (such as hidden or auto) to the sibling elements. EXAMPLE:

div sibling-elements{
 overflow: hidden;
}

Answer 6

One valuable lesson I gained was the importance of considering the size of content within buttons or adjacent elements. It is possible for these elements to not align on the same baseline, causing some to appear higher than others when placed side by side. To address this issue, one effective approach is to apply a specific overflow property (such as hidden or auto) to the sibling elements. EXAMPLE:

div sibling-elements{
 overflow: hidden;
}

Having trouble getting two divs to align on the same line using the 'inline' method

Answer №1

Answer №2

Answer №3

Similar questions

Div positioned absolutely beneath the footer

Encountering [Object Object] within an angular2 app

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

Acquire the Information from a Textarea That Has Been Edited by the User

Adaptive website backdrop

CSS: When using the float: right property, the container does not grow to

Eliminate the unnecessary gap below the image

What causes a fixed position div to extend beyond the boundaries of the main container?

Master the art of keeping track in just a single line

Altering various HTML components with every swipe of SwiperJS

Error: Element not found. Element with the specified XPath query '//button[normalize-space()='LOAD MORE']' could not be located

Issues with the functionality of customisable list items in a list

Having trouble identifying the source of the margin-right styling being used

Pros and cons of leveraging a hybrid HTML/Objective-C app for the iPhone platform

Save the session ID in localStorage instead of a cookie

The Typescript Select is displaying an incorrect value

Modify the background color of <td> elements depending on the specific value

I am facing an issue with accessing the Controller in Laravel

Challenge with the positioning of HTML output layout

Leveraging Masonry.js with dynamically created divs using jQuery