Having issues with the horizontal list layout

I am having trouble implementing Bootstrap horizontal lists on my website. How can I resolve this issue?

Desired outcome:
https://i.sstatic.net/zzBFi.png

Current situation:
https://i.sstatic.net/cfoZN.png

Below is the snippet of CSS code in question:

.btn-xs, .btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    width: 73px;
    height: 38px;
    background-color: #53585f;
    color: white;
    font-family: sans-serif;
}
.btn-default:hover {

    background-color: #b89981;
    color: white;

}
ul.list-group:after {
  clear: both;
  display: block;
  content: "";
}

.list-group-item {
    float: left;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 73px;
}
.padding20 {
    padding : 10px;
}

.textbox {
    line-height: 24px;
}
.liststyle1 {
    margin: 0;
    list-style: none;
    margin-top: 10px;
    line-height: 28px;
    color: #309be8;}
<div class="container">
<h2>dsd</h2>
  <button type="button" class="btn btn-default btn-xs">Total</button>
         <button type="button" class="btn btn-default btn-xs">Check-Out</button>
           <button type="button" class="btn btn-default btn-xs">Check-In</button>
             <button type="button" class="btn btn-default btn-xs">Alerts</button>
               <button type="button" class="btn btn-default btn-xs">Tentative</button>


</div>

<div class="container list-top">
  <ul class="list-group">
    <li class="list-group-item">12Bookings
</li>
    <li class="list-group-item">Dapibus </li>
    <li class="list-group-item">Morbi</li>
    <li class="list-group-item">Porta</li>
    <li class="list-group-item">Vestib</li>
  </ul>
</div>
htmlcsstwitter-bootstrap

Answer №1

Implemented a flexbox solution and organized the CSS code for better readability.

.btn-xs,
.btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border: none;
  width: 100%;
  height: 38px;
  background-color: #53585f;
  color: white;
  font-family: sans-serif;
  display: block;
}

.btn-default:hover {
  background-color: #b89981;
}

.list-group {
  display: flex;
  justify-content: flex-start;
}

.list-group-item>div {
  height: 38px;
  line-height: 38px;
}

.list-group-item {
  background-color: #fff;
  border: 1px solid #ddd;
  list-style: none;
  width: 100px;
  text-align: center;
}
<div class="container">
  <h2>dsd</h2>
</div>

<div class="container list-top">
  <ul class="list-group">
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Total</button>
      <div>12Bookings</div>
    </li>
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Check-Out</button>
      <div>Dapibus</div>
    </li>
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Check-In</button>
      <div>Morbi</div>
    </li>
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Alerts</button>
      <div>Porta</div>
    </li>
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Tentative</button>
      <div>Vestib</div>
    </li>
  </ul>
</div>

Answer №2

One simple fix is to add the CSS property float: left; to the buttons.

APPROVE

.btn-xs, .btn-group-xs > .btn {
    /* insert your code here */
    float: left;
}

Answer №3

Give this style sheet a try - I've made some adjustments to your code.

<style type="text/css>
      .btn-xs, .btn-group-xs > .btn {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
        width: 77px;
        height: 38px;
        background-color: #53585f;
        color: white;
        font-family: sans-serif;
    }
      .btn-default:hover {

        background-color: #b89981;
        color: white;

    }
    ul.list-group:after {
      clear: both;
      display: block;
      content: "";
    }

    .list-group-item {
        float: left;
    }

    .list-group-item {
        position: relative;
        display: block;
        padding: 10px 2px;
        margin-bottom: -1px;
        background-color: #fff;
        border: 1px solid #ddd;
        width: 80px;
    }
    .padding20 {
        padding : 10px;
    }

    .textbox {
        line-height: 24px;
    }
    .liststyle1 {
        margin: 0;
        list-style: none;
        margin-top: 10px;
        line-height: 28px;
        color: #309be8;}
    </style>

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

The Android WebView experiencing issues with the functionality of the Hamburger Menu

I'm facing an unusual issue with the Android WebView in my app. The hamburger menu on my website works perfectly fine on my mobile browser, but when I try to open it in the Android WebView, it does not fully expand to show the menu items. I have trie ...

androidcsswebviewbootstrap-5

Limit the character input in AngularJS/Ionic to a specific number

I have a text input field that needs to restrict the user from entering more than a specific number of characters. Let's say I only want the user to type 10 characters, and if they try to enter more, the text field should not accept it. It should stop ...

htmlangularjsvalidationangularjs-directiveionic-framework

relocate HTML components

I've been trying to reposition HTML elements within the body of a webpage, but I'm struggling with getting a form tag to appear exactly in the center of the browser - and only that form tag. Can anyone offer guidance or suggest relevant topics fo ...

htmlcssmove

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...

javascripthtmlcssangularjsangular-ui-bootstrap

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

htmlcss

Arrange two internal divs on top of one another with the option to maintain the float

While searching for a solution to my issue, I noticed that most responses involved removing the float property. However, since I am new to CSS, I would like to explore using float and see if it's the best approach. Here is the fiddle I've been w ...

htmlcss

Bootstrap's landing page problem

I am currently working on creating a landing page using bootstrap and have encountered an issue with the text alignment in my section containing icons and tags. In order to make the text appear clean and concise, I want the text to be displayed in either o ...

htmlcsstwitter-bootstrapweb-frontend

Changing colors using JavaScript: A step-by-step guide

Hey there! I'm looking to change the color code in this script from $("#Tcounter").css("color","black") which uses the color word "black", to "#317D29". Can someone help me figure out how to do this? <script type="text/javascript"> $(document). ...

javascriptjquerycss

CSS button with folded corner illusion and dynamic transitions

I have been using the code provided below to create a folded corner effect on a button, but I am having trouble with the white background that appears in the upper left corner of the button. Is there a class I can use to make this transparent so that the y ...

htmlcss

Consistently navigating back to the Home Page through AJAX

Can anyone assist me in resolving my issue? I have three files: index.php, process.js, and redirect_process.php. The index.php serves as my homepage with a form embedded in it. Whenever the submit button is clicked, the process.js script is triggered to v ...

javascriptphpjqueryhtmlajax

Guide on incorporating JSON information into an HTML table

Currently, I am retrieving data that needs to be added to an HTML table once it is received. I have attempted some methods, but I am unable to dynamically add the data after the page has loaded. I aim to accomplish this using either JavaScript or jQuery. ...

javascripthtmljsondomaddeventlistener

Can the placement of divs impact search engine optimization (SEO)?

My website is currently structured with div containers in the following order: Less important left side bar Less important right side bar The core center content at last I am concerned about the impact on SEO as the core content comes after the sidebars ...

htmlsearch-engineseogoogle-search

Do double forward-slash comments work in CSS code?

Is using a double-forward slash (//) for single-line comments in CSS considered reliable and supported by mainstream browsers and CSS interpreters according to the specification? ...

csscomments

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Can someone help me understand this strange behavior I am experiencing across all browsers? <div style="margin-top:5px"> <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button> <butt ...

htmlcssangularjs

What is the method of posting to PHP using JavaScript without utilizing Ajax?

My current code involves a drag and drop file uploader to PHP using ajax, but it seems that my web host does not support ajax. Is there an alternative method to achieve this without using ajax? Specifically, I am facing issues with the UploadFile functio ...

phpjavascriptajaxhtml

Issues with cascading style sheet navigation designs

Working on this project is new to me and I am encountering a challenge with two issues. My goal is to create a menu display similar to the image shown here: https://i.sstatic.net/FsHq5.png The problem lies in my inability to underline the selected optio ...

cssvue.js

Trouble with ASP.NET Master Page CSS Rendering Incorrectly

My CSS seems to be causing some trouble as the DIVs are not aligning as they should. Instead, they are just wrapping around the text and not adjusting the page layout properly. Here is an example of my CSS: body { height: 95%; width: 100%; ma ...

htmlcssasp.net

Is concealing a button an effective strategy?

Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes ...

htmlcsstwitter-bootstrapfrontend

Is there a way to keep track of changes in multiple dropdowns without having to create a separate JavaScript function for each one

I'm looking for a way to dynamically add more dropdowns as my website grows without having to keep adding new functions to the JavaScript code. Is there a solution for this? Currently, I can add additional functions to the JavaScript like this: ...

javascriptc#htmlasp.netasp.net-mvc

What is the best way to extract text from a dynamically changing element using jQuery?

I've been struggling with a coding issue. Despite trying numerous approaches, I keep encountering the same problem where every new button I add ends up having the same text or, alternatively, nothing seems to work as expected. $j serves as my variabl ...

javascripthtmljquerynext.js