Images in a list using Bootstrap are not appearing aligned in a row as

Although it may appear simplistic, as a beginner coder I am struggling to get my code to display properly (I am using bootstrap). The desired result I want to achieve is 

FLAG languagename    FLAG languagename

Here is the HTML:

<div class="">
<ul class="list-unstyled list-inline">
  <li><a href="#"><div class="flag flag-lt"></div>Lietuvių</a></li>
  <li><a href="#"><div class="flag flag-ru"></div>Rusų</a></li>
</ul>
</div>

And the CSS:

.flag {
  width: 16px;
  height: 11px;
  background:url(http://oi60.tinypic.com/2q2iuj6.jpg) no-repeat
}

.flag.flag-lt {background-position: -16px 0}
.flag.flag-ru {background-position: 0 -11px}

I have created a js filldle with external resources

htmlcsslist

Answer №1

In order for this to function correctly, you must include one of the following in your flag CSS block:

display: inline-block;

or

float: left;

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

Variables for HTML comment form using PHP mail

How do I properly pass HTML form variables to a PHP mailer? The PHP code is: $comment = $_POST['comment']; $email = $_POST['email']; $to = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60131313 ...

phphtmlformsvariablesmailer

The issue with the display grid position being set to absolute is causing functionality

Struggling to create an image catalog with cards containing text while using position absolute on the text and position relative on the card. Unfortunately, it's not working as expected. /*catalog style*/ .grid-container{ padding: clamp(5px,10vw,2 ...

htmlcsscss-positioncss-grid

Update the style dynamically in Angular using an ngFor directive and an array of data

Is there a way to dynamically set the width using data from an array in Angular? The usual approach doesn't seem to work. How can I solve this issue? <div *ngFor="let item of products"> <div [style.width.px]="item.size" class="Holiday"&g ...

htmlangulartypescriptarraylist

NodeJS instructs open(html) to execute first before any other code is executed

I am evaluating whether nodeJS is a suitable solution for a project I am working on during my internship. To summarize: I need the basicNode.js file to wait until the open('./basic.html') command has completely opened the browser and loaded its c ...

javascripthtmlnode.js

Extension for Chrome - Personalized pop-up notification when page loads

I am looking to create a custom alert box that triggers on page load instead of the default one, which I find unattractive and possibly irritating for users. alert('hello'); My current approach involves the following code: manifesto.js "cont ...

javascripthtmlcssgoogle-chrome-extension

"Optimizing Image Display in Web Browsers

Currently, I am using JavaScript to dynamically size a transparent .gif on my website. The original image size is approximately 200x200 pixels, but it's usually resized to be between 600x600 and 800x800. When viewing the resized image in IE8 and FF3, ...

javascripthtmlimagebrowserrendering

Perform Jquery trigger on mobile by clicking, and on desktop by hovering

Despite encountering this question numerous times, I am still unable to find a solution. I have a dropdown menu and I want it to open on hover for desktop and on click for mobile devices. I attempted using the provided code, however, it only works after r ...

jquerycssmobileresizewindow

Show the chosen option when the textarea is no longer in focus

My form includes a text box and a button: <p><textarea rows="4" cols="30">Aliquam erat volutpat.</textarea></p> <p><input type="button" value="Submit"></p> When the user selects text in the textarea and then cl ...

javascriptjqueryhtmlcss

Locate a Sub-Child href Element using Selenium

I am attempting to interact with a link using Selenium automation tool. <div id="RECORD_2" class="search-results-item"> <a hasautosubmit="true" oncontextmenu="javascript:return IsAllowedRightClick(this);" class="smallV110" href="#;cacheurl ...

pythonhtmlseleniumweb-scraping

Guiding user to their destination after signing in

Having trouble showing different headers based on user login status? Users can log in using login.php, but you're struggling to display header.php when a user is not logged in or logged in. You want the page to show profile form content when they are ...

phphtmlmysqldatabasesession

What steps should I take to ensure my HTML project displays correctly on mobile devices?

Hey everyone, I recently completed a website and optimized it for mobile viewing by working on a window with the lowest width allowed by Chrome. However, when I checked it on an actual cellphone, it was displaying as if on a widescreen PC. It seems like th ...

htmlcssmobilebootstrap-4

List of prices with a dotted line separating the price and product, adjusting its width based on

I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet: https://jsfiddle.net/romariokbn/2gm27rv6/ <ul class="how-can-i-do"> <li> <span ...

htmlcss

Centered CSS Box with Pointing Arrow

I'm looking for a way to create a unique div design that includes an arrow pointing downwards attached to the bottom. After some exploration, I was able to achieve this look through this process: http://jsfiddle.net/hyH48/. However, my challenge lies ...

css

Enhance the speed of webview on Android devices

I have been working on an application that utilizes a webview to load both HTML and JavaScript files. Unfortunately, I have noticed a significant decrease in performance when displaying the content. Despite trying various solutions such as: webVi ...

javascriptandroidhtmlwebview

Using GreenSock to animate and manipulate the tween function's parameters

I have two functions that are called on mouse events: function menuBtnOver(e){ var b = e.data; b.setPosition(b.x, b.y+5); } function menuBtnOut(e){ var b = e.data; b.setPosition(b.x, b.y-5); } Additionally, there is another function: setP ...

javascriptjquerycsstweengsap

What is the method for enlarging an element without regard to surrounding elements?

I am working on a code where I want the element to zoom in when hovered, completely disregarding its normal flow. By "ignoring its flow," I mean that other elements like tags might obstruct parts of its content. https://i.sstatic.net/NBoez.png https:// ...

javascriptjqueryhtmlcss

Unable to find component: "wrestler-choice-box". If this is a built-in custom element, please ensure it is not included in component resolution

In my attempt to achieve a specific goal, I have an array of data that I want to incorporate into my HTML document along with a Vue component containing a template. My intention is to utilize list rendering so that the names and images from this array bind ...

javascripthtmlvue.jsvue-componentvuejs3

javascript various backgrounds on click

I have implemented a list to allow users to select their top 3 choices, and I am using JavaScript to track these selections and change the background color accordingly. 1st selection -> Green background 2nd selection -> Yellow background 3rd sel ...

javascriptcss

Position the div element below the navigation bar

I am attempting to embed a Leaflet map within a standard Sails.js view. Sails.js automatically includes a page header on every page. Currently, with a fixed height, the map appears like this: #mapid { height: 400px; } https://i.sstatic.net/pzOdql.jpg ...

csssails.js

Looking for assistance navigating through a website's links using Selenium?

Trying to extract links from this webpage, specifically the ones listed in the footer. An example of what I'm dealing with: https://i.sstatic.net/PPvb0.png The goal is to scrape all links related to securities displayed in a table and then navigate ...

htmlseleniumweb-scrapingbeautifulsouphref