What is the best method for aligning the ul list in my specific situation?

I'm currently working on developing an unordered list for my application.

Here is what I have so far:

HTML

<div id='wrapper' class='container'>
      <ul>
          <li id='first-btn'></li>
          <li id='second-btn'><a href='#'>test</a></li>
          <li id='third-btn'><a href='#'>test 3</a></li>
      </ul>        
  </div>

CSS

#wrapper li{
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
}

#first-btn{
    background-color: #5A8D17;
}

#second-btn{
    background-color: #80CD1D;
}

#third-btn{
    background-color: #FFEE00;
}

However, the final output looks strange to me.

  1. The second and third buttons appear to be shifted downward.
  2. Additionally, I want the buttons to be placed right next to each other without any gaps between them,
    without the 2px margin that's currently visible.

http://jsfiddle.net/Mcq6u/

Could someone assist me with this issue? Thank you!

htmlcss

Answer №1

1) Your list items appear oddly aligned because they are vertically-aligned to the baseline by default. The text on the right two items align with the baseline of the first (at the bottom).

2) The '2px margin' between each item is actually just white space. Since the list items are displayed as inline-block, they pick up on this white-space.

To fix this issue, adjust the vertical alignment and remove or comment out the white-space:

HTML

<div id='wrapper' class='container'>
    <ul>
        <li id='first-btn'></li><!--
        --><li id='second-btn'><a href='#'>test</a></li><!--
        --><li id='third-btn'><a href='#'>test 3</a></li>
    </ul>        
</div>

CSS

#wrapper li {
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
    vertical-align:top;
}

JSFiddle

Answer №3

If you want to make changes, consider modifying the following CSS:

#wrapper li {
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
    float: left;
    }

To add space between the elements in the same class, include the following:

margin: 5px;

Remember to adjust the pixel values according to your requirements.

Check out this fiddle for reference

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

What are the steps to transition to the new Google Identity Service sign-in process?

I am facing a challenge in migrating my app to the latest Google identity service sign-in methods. I have been struggling with this for days and find Google's documentation quite confusing. That's why I'm reaching out here for some assistanc ...

htmlreactjsgoogle-identity

What steps can I take to stop the datepicker from altering the value of the previous row?

I have implemented a datepicker function using React Bootstrap for each table row. The issue I am facing is that when I change the date in the first row, it correctly updates. However, when I try to change the date in the second, third, and subsequent rows ...

javascriptjqueryhtmlreactjs

What is the best way to keep the menu bar in place as you scroll?

Can someone help me figure out how to keep the menu bar fixed at the top of the page when the user scrolls down? I've tried various methods but haven't had any luck. Any assistance would be greatly appreciated. Here is the CSS code: And here is ...

htmlcssmenumenubar

Styling of individual rows on hover in HTML

Here is the table I am working with: <tr> <th><p>ID</p></th> <th><p>NAME</p></th> <th><p>CLASS</p></th> <th><p>EDIT</p>&l ...

htmlcss

How can I assign a specific class to certain elements within an *ngFor loop in Angular?

I have a situation where I am utilizing the *ngFor directive to display table data with the help of *ngFor="let record of records". In this scenario, I am looking to assign a custom CSS class to the 'record' based on specific conditions; for exam ...

javascriptcssangulartypescriptangular5

Not successfully integrating an angular component

In my Angular application, I am working on creating a new component and injecting it into the app. Below is the code for the angular component: (function(angular) { 'use strict'; angular.module('some.someModule', ['bm.component.t ...

javascripthtmlangularjs

Unable to load CSS background image and update code

After writing the code in my CSS file, /*The code I initially wrote*/ .wrapper::before { content: ""; position: absolute; bottom: -30%; left: 0; height: 100%; width: 100%; background: url(../img/homeTrans2.svg) no-repe ...

htmlcss

Form submission caused by automatic loading of the page results in an endless loop

https://i.sstatic.net/cg5b3.jpgi'm currently implementing a Filter with the use of a Form. The desired functionality is that when a user lands on the list page, the form should automatically submit so that the user can view only the values they want t ...

javascriptphpjqueryhtmlforms

What is the method for adjusting the width of a v-card based on its height?

I have a changing number of v-cards that are displayed based on their quantity. My goal is to maintain an aspect ratio of 16/9, but only adjust the width. To achieve this, I believe I need to make the width dependent on the height, although I am unsure ho ...

javascriptcssvue.jsvuetify.js

What is the best way to ensure that the input submit element is only visible after the input checkbox element has been checked?

For a school project, I am attempting to create a simulated reCAPTCHA box. Although my code is complete, I would like the functionality to submit your response from the input fields above only after selecting the reCAPTCHA checkbox. Upon researching, it ap ...

javascripthtmlinputrecaptchaform-submit

JQuery is failing to update my page with the new style when adding a dynamic page

I have designed a function that dynamically creates and adds content to the body of an HTML page. However, I am facing an issue where the styles I desire are not being applied to the content. I am aware that dynamically added content may not inherit styl ...

javascriptjquerycsscordovajquery-mobile

To make a JavaFX label stand out, simply prepend a vibrant red asterisk at the start of

I'm facing a challenge with my SceneBuilder project. I have developed a scene that consists of several labels, and I want to highlight some of them by adding a red asterisk at the beginning of their text. Unfortunately, I haven't been able to fin ...

cssjavafx

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

javascriptcssgoogle-maps

What's the best way to keep the hover effect on my main tab while ensuring it doesn't impact the sub tabs?

I'm facing an issue with a hover effect on my "menu" tab that is also applying to the sub tabs within it. How can I prevent this from happening? Below is the code snippet causing the effect: `nav ul li:hover > a { color:#f9b97a; border-bottom:2p ...

htmlcss

Bootstrap Tags Input - the tagsinput does not clear values when removed

I am attempting to manually remove the input value from bootstrap-tags-input when the x button is clicked, but the values are not changing in either the array or the inputs. This is the code I have tried: $('input').tagsinput({ allowDuplica ...

javascripthtmljquerybootstrap-tags-input

Tips for aligning words on a single line

Encountering an issue with long words being split up in the middle of a line, as shown in this photo: https://i.stack.imgur.com/IxQi6.png This is the code snippet causing the problem: ineligiblePointsTableRows() { return this.state[PointsTableType. ...

htmlcsssassstyling

Automatically Clearing Text in JQuery Input Fields

Does anyone know how to use jQuery to clear text and hide an image when a message is deleted inside an input text field? I tried the code below but it's not working. Can someone provide a sample snippet? <script src="https://ajax.googleapis.c ...

jqueryhtml

Ways to differentiate between buttons in a button cluster?

I have created a set of 3 buttons using the code from this resource. However, the buttons are currently positioned vertically close to each other as shown in the source code. I would like to adjust the spacing between them. Is there a way to achieve this ...

htmlcss

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

Tips on ensuring a div containing an image element has equal height as the image

Here is the HTML code I am working with: <div> <img src="http://placehold.it/319x300" alt=""> <div> And the corresponding CSS: *{margin: 0; padding: 0;} div{ background: red; width: 319px; height: auto; } img{ width ...

css