What is the best way to align the ul, li, and span elements in a single row?

To display the 'previous' on the left side of the list item and the 'next' on the right side, aligned in a single line, how can this layout be achieved?

<ul style= 'list-style-type: none;'  class="filter1">
    <li><span class="filtercat1">red</span></li>
    <li><span class="filtercat1">blue</span></li>
    <li><span class="filtercat1">yellow</span></li>
    <li><span class="filtercat1">all</span></li>
</ul>


<span id="filterbutton1">
    <a href="#" id="prev">« Previous</a> 
    <a href="#" id="next">Next »</a>

http://jsfiddle.net/BlacBunny/5tfcuy1w/12/

javascriptjqueryhtmlcss

Answer №1

To simplify the layout, consider rearranging the nodes within the document:

<a href="#" id="prev" class="align">« Previous</a> 
<ul style= 'list-style-type: none;'  class="filter1 align">
    <li><span class="filtercat1">red</span></li>
    <li><span class="filtercat1">blue</span></li>
    <li><span class="filtercat1">yellow</span></li>
    <li><span class="filtercat1">all</span></li>
</ul>
<a href="#" id="next" class="align">Next »</a>

I implemented an "align" class to the three sections and applied styling like so:

.align {
   float: left;
   display: inline-block;
   margin: 5px;
   padding: 5px;
   min-width: 80px;
   text-align: center;
}

http://jsfiddle.net/b0m3xk6z/

Answer №3

Give this a shot :-

<ul><li><a href="#"  id="prev">Back</a></li>
    <li>
<ul style= 'list-style-type: none;'  class="filter1">
        <li><span class="filtercat1">green</span></li>
        <li><span class="filtercat1">purple</span></li>
        <li><span class="filtercat1">orange</span></li>
        <li><span class="filtercat1">category</span></li>
    </ul>
</li>
<li><a href="#" id="next">Next Page</a></li>
</ul>

LINK

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

Unable to perform dynamic query with $in operator in Mongoose find method

I am currently utilizing Node.js along with Mongoose version 5+ to create a dynamic query in my database. The variable filterField represents the field name, while filterValues is an array. Here is an example of how my code looks: if (req.currentUser.acti ...

javascriptnode.jsmongodbmongoose

Having trouble implementing Bootstrap Progress Bar with AJAX in webpy

I am currently working on a web application using webpy and dealing with a Bootstrap progress bar in the template HTML file. To update this progress bar dynamically, I aim to utilize jQuery AJAX calls to fetch data from the server. In order to achieve thi ...

jqueryajaxtwitter-bootstrapweb.py

Setting up JW Player with a YouTube Embed URL

Embed link Is it possible to embed a YouTube link in my JW Player without disrupting the design? I have a specific design for the JW Player frame that I need to retain while incorporating the YouTube link. I have searched extensively but haven't foun ...

javascripthtmlyoutubejwplayer

A guide on how to associate data in ng-repeat with varying indices

Here is the data from my JSON file: var jsondata = [{"credit":"a","debit":[{"credit":"a","amount":1},{"credit":"a","amount":2}]}, {"credit":"b","debit":[{"credit":"b","amount":3},{"credit":"b","amount":4},{"credit":"b","amount":5}]}, {"credit":"c","debi ...

javascriptjsonangularjs

Bootstrap's ability to display panels of equal height across multiple rows is a game

Just started using Bootstrap 4 after being familiar with Foundation for years. In Foundation, equalizer was a tool to ensure divs had the same height, which would be applied to all divs within a container. I understand that Bootstrap uses Flex, but I&apos ...

csstwitter-bootstrapflexbox

Guide to generating a dynamic array using the value of a checkbox data attribute

Whenever a checkbox is clicked, I want to create a dynamic array using its data-attribute value and then add all checked checkboxes with the same data-attribute value to this array. For example, if I click on "height," I should create an array with its da ...

javascriptjqueryarrays

Every time I make changes to the page, the outdated CSS keeps reappearing

I recently updated the CSS for React CKEditor 4 on my website to give it a better look. The changes were reflected when I first viewed the page on localhost, but strangely, when I go to another page with CKEditor 4, it reverts back to the original stylin ...

cssreactjssassckeditor

The component is failing to store its value within the database

I'm encountering an problem when attempting to save an option in the database. To address this issue, I created a component in Svelte called StatePicker that is responsible for saving US States. However, when I try to save it in the database using a ...

javascripttypescriptsvelte

Create object properties as optional, declare them afterwards, and access them without needing to verify

I'm wondering if there's a way to work around type definitions. Let me provide an example to clarify my question. Suppose I want to define a type that consists of a large object containing multiple objects: type BigObject = { dom: HTMLElement, ...

javascripttypescript

Tips for changing div visibility depending on class name

I'm looking to optimize the sorting of two sets of elements with equal amounts. Currently, they appear clustered together. Is there a method to arrange them into a single column, alternating based on their class names? For example, .item1, .item2, .it ...

htmlcssflexboxcss-grid

I've been diving into webpack and experimenting with making an api call, but I'm hitting a roadblock. Let me share with you my code

This section pertains to the server const dotenv = require('dotenv'); dotenv.config(); // Setting up environment variables const express = require('express'); const bodyParser = require('body-parser'); const cors = require(&a ...

javascriptnode.jsexpress

How can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

I need help figuring out how to revert an element back to its original size after it has been modified with .resizable. I attempted the following: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code. ...

javascripthtmljquerycss

Using RTK Query to store data in a Firebase Realtime Database

Currently, I am facing an issue while trying to retrieve data from a Firebase Realtime Database using RTK Query. The code in this section is throwing an error because the return value is incorrect. If anyone has experience with this particular issue, I wou ...

javascriptfirebasefirebase-realtime-databasereduxrtk-query

How to effectively implement light and dark themes using SCSS colors?

Currently, I am utilizing Vue.js and SCSS along with PrimeVue and Element plus, where I am importing their variables. My objective is to dynamically change the theme color. In my dark-variables.scss file, I have defined various color variables for differe ...

cssvue.jssassthemeselement-plus

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard

Error: The script is unable to access the property "div" because it is undefined

I keep encountering this issue "Cannot read property 'div' of undefined" This is the snippet in question function validateData(){ for(let j = 0; j < 13; j++){ if(dataArr[j].data.textContent === resultSet[j].result.div. ...

javascriptfunctionif-statement

Emulating a button press on the login screen

I have been attempting to utilize jQuery to simulate a button click on a login page. Interestingly, the conventional JavaScript method functions as expected: document.getElementById('loginButton').click(); However, the same action using jQuery ...

javascriptjquery

Encountering a 404 error while accessing my meticulously crafted express server

After ensuring that the server is correctly set up and without any errors related to imports or missing libraries, I utilized cors for development purposes. A 404 error persisted even after attempting to comment out the bodyparser. https://i.stack.imgur.c ...

javascriptnode.jsexpress

In my Express Javascript application, I recently encountered a challenge where I needed to export a const outside of another

I am currently working with a file named signupResponse.js const foundRegisterUser = function(err, foundUser){ if(!err){ console.log("No errors encountered") if(!foundUser){ if(req.body.password == req.body. ...

javascriptnode.jsexpressmodule.exports

How can AngularJS utilize variables from an external JavaScript <script> file within an HTML document?

As someone unfamiliar with AngularJS, I have a simple inquiry regarding the subject. The code on my page begins by defining an app and controller: <script> var isisApp = angular.module('isisApp', []); isisApp.controller('Acco ...

javascripthtmlangularjs