Issue encountered with list that is set to float to the left

I am facing a situation where I have to display a list of items horizontally, with the exception of the first item. All the items after the first one have a margin-left property applied, but when there are too many items they end up overflowing to a new row, which is not ideal.

For reference, you can view the demonstration on Plunker: Demo

I am looking for a solution where the items that overflow to the second row (8, 9, 10) align properly with the items in the first row. Any assistance with this issue would be greatly appreciated.

htmlcssangularjstwitter-bootstrapcss-selectors

Answer №1

Modified the CSS code by changing the first-of-type selector to last-of-type and updating margin-left to margin-right. Here is the link to the revised plunker:

https://plnkr.co/edit/XZDYi37LWZGeU10HvWdC?p=preview

li:not(:last-of-type) {
    margin-right: 40px;
}

Answer №2

To create space between list items, you can use the margin-right property.

li {
    float: left;
    list-style: none;
    width: 30px;
    height: 40px;
    border: 1px solid black;
    margin-right: 40px;
}

Alternatively, you can use the margin-left property for li elements and try using a negative margin for the ul.

ul{
    margin-left: -40px;
}
li {
    float: left;
    list-style: none;
    width: 30px;
    height: 40px;
    border: 1px solid black;
    margin-left: 40px;
}

Answer №3

If you have the option to use flexbox, you can achieve this by creating a flexbox container with a wrapping property set to flex-start along the flex-axis. Check out the demo below and the updated plunkr here:

li {
  list-style: none;
  width: 30px;
  height: 40px;
  border: 1px solid black;
  margin-right: 20px;
  margin-bottom: 10px;
}
ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Answer №4

Have you considered using bootstrap for this? You could create a layout with a screen/container divided into seven sections (or any number you choose since it's configurable. Typically, the screen is divided into a maximum of 12 sections).

Instead of using li elements, you could opt for using div elements to display the items.

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 is the best way to increase the top padding of an anchor link?

I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...

htmlcss

String of text that appears differently in certain browsers

There seems to be a mysterious line appearing under the text inside a specific div. This issue is only noticeable on Firefox and IE browsers. Take a look at these screenshots; I am using the entire div as a link: Here is the structure of the divs and te ...

htmlcss

Is it possible to send data to a local .json file using the $http service in AngularJS?

Has anyone been successful in using the $http service to send data to a local json file within their app directory? I've experimented with $http.post and $http.get, but so far I have not been able to figure out how to update or add new data to my loc ...

jsonangularjshttpservice

Angular encountered an issue while attempting to load base64 images

I have encountered an issue in my Angular application while trying to load images downloaded from the server as base64. Although I am able to see the images in the app without any difficulty, there are some errors being displayed in the console: https://i ...

angularjsangularjs-scopebase64

How to get the most out of the $scope variable?

Is it possible to assign a regular JavaScript variable the current value of an Angular $scope variable without having their values binded together? //$scope.var1 is set to a specific value, for example, 5 var v2 = $scope.var1; //$scope.var1 is then update ...

javascriptangularjsangularjs-scope

The Angular routing feature seems to be malfunctioning as the URL is showing up but the page fails to load

After including angular.min.js and angular-route.min.js I encountered an issue where clicking the login button would change the URL to '/home', but the home.html page wouldn't load. I attempted adding a controller under templateUrl, but it ...

htmlangularjsauthenticationangular-routing

Tips for inserting the <style> element within a Vue.js component

Currently working with Vue.js v2, I am facing an issue where I have a CSS stylesheet stored as a string in a variable. import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass'; I am trying to generate a <style& ...

cssvue.jswebpackvuejs2

Organizing a drop down list in alphabetical order with Angular.js is not supported

I have encountered an issue with ordering the drop down list alphabetically using Angular.js. Below is the code I am using: <div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon ndrftextwidth text-right" style="width:180p ...

javascriptangularjs

What is preventing NgClass from applying the CSS styles?

I'm currently facing an issue in Angular2 where I am trying to apply different styles using ngClass within an 'NgFor' loop, but for some reason, it's not working as expected. Apologies for any language errors. <div class='line ...

cssangular

Header and footer remain unaligned

Bookstore.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ul { list-style-type: none; padding: 20px; overflow: hidden; background-color: black; width:1230px; p ...

htmlcssjsp

Tips for concealing lengthy text within a select box and automatically wrapping it when displayed as an option

Is there a way to conceal lengthy text within a select box and display it only when the option is selected? I want to hide long text in a select box options, but have some sort of signal to show that more text is available. Is there a javascript solution ...

javascripthtmlcsstextdrop-down-menu

The lower text box on the page being covered by the virtual keyboard on IOS

Our website features a fixed header and footer with scrollable content. We have 20 text boxes on the page, but the ones at the bottom, like Zip and Telephone, are obscured by the iOS virtual keyboard that appears when a text box is clicked. If we could d ...

javascripthtmlioscss

Save documents in Firebase storage

Currently in the process of developing a web application using Firebase and Angularjs as my frontend tools. Curious to know whether it's feasible to store various file types within the Firebase DB. Could you shed some light on any potential limitatio ...

javascriptangularjsfirebase

Modal windows allow for passing variables through the use of resolve binding

I am currently working with the following directive: angular.module('ui.bootstrap.demo').directive('warningDirective',function() { return { restrict: 'EA', scope: { showwarning: '=', warningmes ...

angularjsangularjs-directivebootstrap-modal

I am concerned about the security of my games as they can be easily hacked through right-click inspect. What measures can

As a newcomer to game development, I am creating web games using JS, HTML, and CSS. However, I have encountered an issue with preventing right-click inspect hacking, which has led to people hacking my games through this method. I am wondering, how can I s ...

javascriptphpjqueryhtml

JS will reach its stopping point at the specified style.zIndex

I am currently in the process of setting up button elements. I have two scripts that correspond to different types of buttons - one script runs a simple collapse menu, while the other executes a more complex collapse by shifting depths and sliding one div ...

javascripthtmlcss

Implementing AngularJS JQuery Datatables Directive for Displaying Multiple Data Tables within a Single View

I have successfully implemented the following directive: angular.module('myApp').directive('jqdatatable', function () { return { restrict: 'A', link: function (scope, element, attrs, ngModelCtrl) { ...

javascriptjqueryangularjsdatatablesangular-directive

Curved edges optimized for Safari and Chrome browsers

After exhausting all recommendations to fix the rounded corners problem, I am seeking help. The issue is that it displays correctly on Firefox but not on Safari or Chrome. Below is my code: #sidebar4_content{ margin: 0 auto; float: right; widt ...

cssgoogle-chromesafarirounded-corners

As I enlarge the font size, the border around the div also expands

Can someone explain why the size of the div border increases along with the font size? If you'd like to see an example, check out this link to a jsFiddle: LINK TO JS FIDDLE: http://jsfiddle.net/krishna22211/m14qms52 ...

javascripthtmlcss

My custom class is being ignored by Tailwind CSS within breakpoints

I'm attempting to incorporate some animation on the height property within the md breakpoint, but for some reason Tailwind CSS isn't applying my class. <div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? ...

cssreactjsnext.jstailwind-css