Is there a way to format wrapped lines with indentation in an unordered list?

Is there a way to indent the wrapped lines of text in an unordered list? The current layout is not quite what I want, as shown in the first image below. Ideally, I would like it to look more like the second image.

I attempted to use margin-left: 56px; and text-indent: -56px; on the header, but the results were unexpected and not ideal.

https://i.sstatic.net/JVA85.png

https://i.sstatic.net/5zgrI.png

Feel free to experiment with the code using this fiddle: https://jsfiddle.net/twestfall/n2Ln9hfp/

HTML:

<header class="l-index-header">
    <ul class="category-nav">
        <li> <a href="http://test2.spinneybeck.com/index.php?/architectural-products">All</a>
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/belting-leather-wall-tiles">Belting Leather + Wall Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/handrails">Handrails</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/magnetic-backed-leather">Magnetic Backed Leather</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/pulls">Pulls</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/rugs">Rugs</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/floor-tiles" class="is-current">Floor Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/screens">Screens</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/wall-panels">Wall Panels</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/custom">Custom</a> 
        </li>
    </ul>
</header>

CSS:

.l-index-header {
    *zoom: 1;
    max-width: 50.5em;
    padding-left: 0;
    padding-right: 0;
    margin-right: auto;
}
.category-nav li {
    display: inline-block;
}
.category-nav a {
    font-family: HelveticaNeueLT-Medium, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #acadaf;
    text-decoration: none;
    padding: 0 0.8em;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
.category-nav li:first-of-type a {
    border-right: 1px solid #929496;
    padding-right: 1.2em;
    margin-right: 0.2em;
}
.category-nav a:hover {
    color: #2f292a;
    background-color: #e6e7e8;
}
.category-nav a.is-current {
    color: #2F292A;
}
javascriptjqueryhtmlcssword-wrap

Answer №1

To resolve this issue, you can simply include the following CSS styles:

.category-nav {
    margin-left: 1.7em;
}
.category-nav li:first-child {
    margin-left: -4.7em;
}


.l-index-header {
    *zoom: 1;
    max-width: 50.5em;
    padding-left: 0;
    padding-right: 0;
    margin-right: auto;
}
.category-nav {
    margin-left: 1.7em;
}
.category-nav li:first-child {
    margin-left: -4.7em;
}
.category-nav li {
    display: inline-block;
}
.category-nav a {
    font-family: HelveticaNeueLT-Medium, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #acadaf;
    text-decoration: none;
    padding: 0 0.8em;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
.category-nav li:first-of-type a {
    border-right: 1px solid #929496;
    padding-right: 1.2em;
    margin-right: 0.2em;
}
.category-nav a:hover {
    color: #2f292a;
    background-color: #e6e7e8;
}
.category-nav a.is-current {
    color: #2F292A;
}
<header class="l-index-header">
    <ul class="category-nav">
        <li> <a href="http://test2.spinneybeck.com/index.php?/architectural-products">All</a>
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/belting-leather-wall-tiles">Belting Leather + Wall Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/handrails">Handrails</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/magnetic-backed-leather">Magnetic Backed Leather</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/pulls">Pulls</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/rugs">Rugs</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/floor-tiles" class="is-current">Floor Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/screens">Screens</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/wall-panels">Wall Panels</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/custom">Custom</a> 
        </li>
    </ul>
</header>

Answer №2

Create a style for .category-nav with properties for text-indent and margin-left, then change the display type of .category-nav a to span. Since text-indent is inherited, set text-indent: 0; for sub-elements.

.l-index-header {
    *zoom: 1;
    max-width: 50.5em;
    padding-left: 0;
    padding-right: 0;
    margin-right: auto;
}
.category-nav {
    text-indent: -4.7em;
    margin-left: 1.7em;
}
.category-nav li {
    display: inline-block;
    text-indent: 0;
}
.category-nav a {
    font-family: HelveticaNeueLT-Medium, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #acadaf;
    text-decoration: none;
    padding: 0 0.8em;
    display: span;
    -webkit-font-smoothing: antialiased;
    text-indent: 0;
}
.category-nav li:first-of-type a {
    border-right: 1px solid #929496;
    padding-right: 1.2em;
    margin-right: 0.2em;
}
.category-nav a:hover {
    color: #2f292a;
    background-color: #e6e7e8;
}
.category-nav a.is-current {
    color: #2F292A;
}
<header class="l-index-header">
    <ul class="category-nav">
        <li> <a href="http://test2.spinneybeck.com/index.php?/architectural-products">All</a>
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/belting-leather-wall-tiles">Belting Leather + Wall Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/handrails">Handrails</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/magnetic-backed-leather">Magnetic Backed Leather</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/pulls">Pulls</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/rugs">Rugs</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/floor-tiles" class="is-current">Floor Tiles</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/screens">Screens</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/wall-panels">Wall Panels</a> 
        </li>
        <li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/custom">Custom</a> 
        </li>
    </ul>
</header>

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

Click the button to send the form without including any hidden HTML element array value

My main goal is to create a dynamic dropdown menu for users when they click a button. Each click triggers a new dropdown to appear. To achieve this, I have been cloning a hidden div each time the button is clicked. Here's an example of how I am accom ...

javascriptjqueryhtmlarrays

Choose an XPath formula that will target every single element, text node, and comment node in the original sequence

How can we write an XPath expression that selects all elements, text nodes, and comment nodes in the order they appear in the document? The code below selects all elements but not text nodes and comment nodes: let result = document.evaluate('//*&apo ...

javascripthtmldomxpath

Tips for adjusting the search bar's position on a mobile device when it is activated by the user

I need help with an open source project where I am developing a search engine using Angular. When using smaller screen sizes, the search bar is positioned in the middle but gets hidden behind the keyboard terminal when clicked on. Can anyone advise on ho ...

javascriptcsshtmlangulartypescript

Changes in menu layout in response to window resizing

The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resi ...

javascriptjqueryhtmlcss

Insert a concealed value into a fresh form field following an AJAX call

Within my file named a.html, I have the following code: <input type="button" class="add" /> <div id="middle"></div> Meanwhile, in file b.html, the content is as follows: <form> <input type="submit" /> </form& ...

jqueryajax

Set a string data type as the output stream in C++

I have a method called prettyPrintRaw that seems to format the output in a visually appealing manner. However, I am having trouble understanding what this specific code does and what kind of data it returns. How can I assign the return value of this code t ...

javascriptc++visual-studio

Dropdown selection in Angular 4 with Firebase integration

I'm currently using Angular 4 in conjunction with Firebase to create a dropdown selector for a list of properties. Upon selecting a property from the dropdown menu, I expect the location of that property to be displayed in another input field below. ...

htmlangularjsangularfirebasefirebase-realtime-database

Is there a way for my extension to prevent a rickroll from starting before the video even begins?

I'm working on creating a Chrome extension that prevents rick rolls. Here's an overview of my manifest.json file: { "name": "AntiRick", "version": "1.0", "description": "Introduci ...

javascripthtmlgoogle-chrome-extension

Maintain position:relative while adding child elements to the div

I am currently working on creating a div that includes a small circle on the right side with an X inside it. Here is my progress so far: Although the X is not yet placed inside the circle as intended, overall it looks good to me. One issue I encountered w ...

htmlcss

typo in tweet share button

There seems to be a strange typo in the Twitter button on my website: Here is the code for the button: <a lang="<?php echo mida_is_english() ? 'es' : 'he' ?>" href="http://twitter.com/intent/tweet" ...

phphtmltwitter

Is ngSwitch in Angular causing the label element to disappear?

I am using AngularJS to generate form elements dynamically based on an array containing form details such as input type and value. For example, here is the code snippet I have for creating a text input field: <div ng-repeat="input in input_array"> ...

javascriptangularjsformsinputangularjs-ng-repeat

The 'wrapper' property is not present in the 'ClassNameMap<never>' type in Typescript

Hey there, I've been encountering a puzzling issue in my .tsx file where it's claiming that the wrapper doesn't exist. My project involves Material UI and Typescript, and I'm relatively new to working with Typescript as well as transiti ...

javascriptreactjstypescriptmaterial-ui

Generating a new array in NodeJs from data retrieved by querying MySQL

In my NodeJs project, I am trying to generate a new array from the results of a MySQL query. Here is the current result: [ { "availabilityId": 1, "dayName": 1, "fromTime": "05:30:00", "toTime": "10:00:00" }, { ...

javascriptjquerymysqlarraysnode.js

Adjusting the width of a div element using a button

I am currently diving into the world of JavaScript, React, and Node.js. My current challenge involves attempting to adjust the width of a div element using a button. However, I keep encountering the same frustrating error message stating "Cannot read prope ...

javascripthtmlcssreactjs

Creating a stylish flyout search box using CSS

I am looking to create a search box that pops up when a button is clicked and disappears when clicked outside. My approach involves using CSS to achieve this functionality. Here is the HTML structure I am working with: <div tabindex="0" class="search" ...

htmlcsssass

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...

javascriptjqueryhtmlcss

Responsive design for Galaxy S7 devices is optimized through the use of media

I am encountering an issue with media queries on two different websites hosted on the same server, both being accessed using a Galaxy S7 device. @media only screen and (min-width:501px) and (max-width: 999px) { } @media only screen and (max-width: 500p ...

htmlcssmedia

The code for the Express app.get() method on the server is not being updated, although other parts of the

Recently, I encountered an issue with my node js and express server that is running on localhost. I made a change in the server code from: app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); To: app. ...

javascriptnode.jsexpress

Convergence phenomenon in SVG when two distinct paths intersect

Working with individual SVG paths and in need of a mitre effect when there is a path join, which is a new concept for me. The SVG shape resembles a polygon, with each side as its own individual path. Although the sample SVG code provided does not display ...

javascriptsvgjquery-svg

Unable to display the column data labels in Highcharts due to the incorrect formatting being presented

I'm having trouble displaying the datetime format at the top of a column in my chart. Although the tooltip shows the correct data when hovering over the columns, the labels are not formatted properly. Received output - 86340000 Expected output - 23: ...

javascriptjqueryhighcharts