Horizontal Alignment of UL and DIV elements

Having trouble aligning a DIV and UL horizontally? Take a look at the code snippet below:

<div class="col-md-12">
    <div class="box-header">
        <h4 class="box-title">Title</h4>
    </div>
    <ul id="menuOnglet" class="nav nav-pills">
        <li class="active">Elem1</li>
        <li>Elem2</li>
        <li>Elem3</li>
    </ul>
</div>

#menuOnglet{width:300px; margin-left:auto; margin-right:0;}

If you're encountering issues where the DIV and UL are not on the same line, check out this fiddle: HERE

Please note that I do not want to wrap my UL with another DIV. Any suggestions or solutions would be greatly appreciated. Thank you!

htmlcss

Answer №1

If you want to align all div, ul, and li elements horizontally on your webpage, you can achieve that easily with a simple CSS declaration:

div, ul, li {
    display: inline-block;    /* this will align all div, ul, li elements on the webpage horizontally */
}


#menuOnglet{width:300px; margin-left:auto; margin-right:0;}

div, ul, li {
    display: inline-block;
}
<div class="col-md-12">
    <div class="box-header">
        <h4 class="box-title">Fiche contact : Jean paul</h4>
    </div>
    <ul id="menuOnglet" class="nav nav-pills">
        <li class="active">Elem1</li>
        <li>Elem2</li>
        <li>Elem3</li>
    </ul>
</div>

Updated jsFiddle

Answer №2

Here is a helpful snippet:

#navigationTab{width:100px; margin: 0 auto;}
.header-box{text-align:center;}

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

Issues arise with jQuery onclick event functionality when the DOM structure is altered

I'm struggling to grasp the concept of jQuery (v1.11) when it comes to events and how DOM interaction impacts those events. The scenario: I am creating a grid of inline-blocks with the class "letter" and listening for clicks: $('.letter).on(&a ...

javascriptjqueryhtmlcssdom

How to save an image in Internet Explorer browser without opening it automatically

Is there a way to download an image in Internet Explorer using the <a> tag without it opening in a new tab? Since IE does not support the HTML5 <download> tag, I am looking for a solution to directly download the image instead of opening it. ...

javascripthtmlinternet-explorer

The concept of cascading opacity in CSS: exploring nested elements

I'm facing an issue with nesting. The header has an opacity of 0.75, and since the logo and mainNav are nested after the header, they also inherit that opacity. However, I require them to have an opacity of 1. #header { position: relative; padding: 0 ...

htmlcsswordpressopacity

Creating a menu bar in jQuery that functions similarly to tabs, but without the need to change divs

Currently, I am exploring ways to create tab functionality similar to jQuery's tabs plugin but without the need to switch between DIVs. Essentially, I am looking for a jQuery plugin that solely handles rendering the tab bar and allows me to designate ...

jquerycss

Guide to Aligning Logo Beside Title at Equal Height Using Vue.js and Bootstrap

export default { name: 'Sidebar' }; #logo { margin: 20px auto; display: block; width: 50%; border: none; } .nav-item a { color: #83888c; font-size: 18px; } .nav-item { justify-content: space-around; } .data-uri-logo1 { backgr ...

javascriptcssvue.js

Conceal the rotation controls within the react-select element

Incorporating the react-select component into my project has been a great addition. However, I encountered an issue when testing in the Windows/Chrome browser - spin buttons started showing up unexpectedly. https://i.sstatic.net/DiZ0W.png After conducting ...

javascripthtmlcssreactjs

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

javascripthtmlcss

Unique phrase: "Personalized text emphasized by a patterned backdrop

I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...

javascriptjqueryhtmlcss

What is the best way to align an unordered list in the center of

I am looking for a way to center an unordered list of unknown width without using a parent div wrapper, while still maintaining the left alignment of the list items. Here is what I want to achieve: HTML <ul> <li></li> <li> ...

htmlcsshtml-lists

The breakpoint feature fails to function on button or div elements, but it is effective when used on li elements

Just starting out with JS and diving into the code of this project called https://github.com/tastejs/todomvc Looking at the screenshot, I attempted to set a breakpoint on the X button, then on its parent element div. However, in both cases, the execution ...

javascripthtmldomgoogle-chrome-devtools

Ways to implement adjustable width in structured table layout?

I have a table with three <td> cells. The first <td>'s width should adjust to its content. The second <td>'s width is fixed. The third <td> should fill the remaining space. Note1: My website is responsive, so the width ...

jqueryhtmlcss

Tips for implementing SVG textPath in a div's background-image using CSS

Is it possible to implement SVG textPath in a div background-image using CSS? Check out my CodePen project here While this code works in HTML, it seems to be ineffective in CSS. background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='decor ...

csssvgbackground-image

Tips for setting a default value in a dynamic select component in Angular

I'm currently working on developing a dynamic dropdown component for my application that will be utilized in various forms across the app. There are scenarios where a predefined value may need to be set for the dropdown, which should be automatically ...

javascripthtmlangulartypescript

Use JavaScript to overlay drawings onto an existing image

Within this particular image, I possess a compilation of pixel coordinates outlining the polygon segments that encompass all the objects contained within it (refer to the image provided below). For example, in relation to the individual, there exists a li ...

javascriptjqueryhtmlimagecanvas

Troubleshooting ng-bind-html issue with displaying images loaded using CSS within HTML content

I followed the instructions provided in a related post on the same topic. I used 'ngSanitize' and formatted the HTML content using 'sce.trustAsHtml()', and it rendered correctly when the HTML contained both text and images. However, I e ...

javascriptcssangularjsng-bind-html

Hide the menu when a menu link is selected

After conducting extensive research, I have come across several scripts that can achieve what I am trying to do. However, I am unsure of how to implement them with my particular WordPress theme. Therefore, I am seeking assistance here: The theme I am usin ...

javascriptjqueryhtmlwordpress

Tips for adjusting the offset dimensions in Bootstrap 4 grid systems

Incorporating Bootstrap 4 into my Angular 8 application, I am faced with an issue on the main page where I have two components sized md-5 and md-6, respectively. To create a gap between them, I used offset-md-1. However, the offset size is too large, res ...

htmlcssbootstrap-4frontendangular-ui-bootstrap

What purpose does the asterisk have in CSS?

Similar Question: Understanding the star-preceded property in CSS I recently came across a CSS file for a jQuery script and discovered the following code snippet: .usual div { *margin-top:-15px; clear:left; background:snow; font:10pt Georgia; ...

csssyntax

I need to achieve success in a straight line, but my outcome is veering off course

I am looking for a specific outcome: https://i.sstatic.net/XUnrR.png This is the desired result: https://i.sstatic.net/XUnrR.png Utilizing Bootstrap version 4.4.1 attempting to use grids with no success <body> <div style="margin-left: 7 ...

htmlcssbootstrap-4frontend

Delayed response of text effects in JQuery on page load

Within my rails app, I have the following code snippet: window.onload = -> $("#mycontainer").typewriter() $("#div1").fadeIn("slow") This code snippet interacts with the following block of content: <blockquote class="pull-left"> < ...

javascriptjqueryhtmlcssruby-on-rails