- bullet point: tabulated

I need to create an unordered list with URLs included and indented, while keeping all lines justified to the left.

* line one text text ted
  more text text
  text
* line two text ted
  more text text
  text
* line three text ted
  more text text
  text

My goal is for the bullet points to be indented without affecting the overall alignment of the text.

I've tried the following code but it's not displaying correctly due to font size issues:

<ul id="subvmtext">        
<li><a href ="breakfast">breakfast</a></li>
<li><a href ="lunch">lunch</a></li>
<li><a href ="dinner">dinner</a></li></ul>

There are other CSS styles in my file causing font sizing problems, so an inline solution would be ideal.

**The proposed solution below is almost correct:

<ul style='list-style-position: outside'>
    <li>Outside list</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item with a <br />line break</li>
</ul>

However, there still seems to be a bullet point visible on the second line of my text.

css

Answer №1

If you're searching for a specific property, take a look at list-style-position. The default setting is outside, which seems to be what you need. Here's an example of the code in action: 

<ul style='list-style-position: inside'>
    <li>Inside list</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item with a <br />line break</li>
</ul>

<ul style='list-style-position: outside'>
    <li>Outside list</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item with a <br />line break</li>
</ul>

Answer №2

It appears that your CSS styling may be causing the indentation issue. If not for this interference, all lines would align to the left as intended. Please refer to the code snippet below:

<div style="width:100px;">
   <ul id="subvmtext">        
     <li><a href ="breakfast">breakfast at tiffany's</a></li>
     <li><a href ="breakfast">breakfast at tiffany's</a></li>
     <li><a href ="breakfast">breakfast at tiffany's</a></li>
   </ul>
</div>

If you provide a jsfiddle link with the remaining CSS styles, I might be able to offer more assistance.

Answer №3

Don't forget to include the following CSS code in your stylesheet

JSFIDDLE LINK

CSS Style

li:before {
    content: "* ";
}

li{
    list-style:none;
}

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 are some ways to ensure a JQM-created button is clickable in Firefox?

I am working on making a div clickable in a jQuery Mobile powered website. The current code I have functions properly in Chrome and Safari, however, it does not work in Firefox - both on desktop and Android FF. <button data-icon="eye"> <a href ...

jquerycsshtmljquery-mobile

The Gulp task is failing to generate the CSS file

Greetings! I have a task set up in my gulpfile.js as shown below: const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('sass', function(){ return gulp.src('sass/*.scss') .pipe(sass()) ...

csssassgulp

Attempting to imitate the hover effect of a scroll-down button

Looking for advice on creating a scroll down button with a hovering effect similar to the one found on this website - . Any tips or suggestions would be greatly appreciated. ...

jquerycss

How do you prevent items from shrinking in a flex container when they have more content?

I am facing an issue with a flex container where the items are set in a row. Once it reaches the end of the viewport width, I want it to overflow-x: scroll. However, instead of enabling scrolling, all items shrink when more items are added to fit the scree ...

htmlcssflexbox

I came across a wlwmanifest.xml file while browsing through the source directory of my website

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="../preload/wlwmanifest.xml"> I am curious about the purpose of including this code in my website. If I were to delete this file, how would it impact the f ...

htmlcsswordpressweb-frontend

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

htmlcssmenu

Moving from one page to another

I am attempting to create a transition effect between sections within a single-page application. All the sections are contained on the same page, with only one section displayed at a time while the rest are set to display none. When a specific event is tri ...

javascripthtmlcsscss-transitions

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

javascriptjqueryhtmlcssopacity

JavaScript and CSS tabs with smooth transition effect

I want to create tabs that smoothly fade between each other when switching. The code I have works, but there's a slight issue. When transitioning from one tab to the previous one, there is a momentary glitch where the last tab briefly changes state be ...

javascripthtmlcss

Drifting my dropdown menu bar through the digital sea

I'm having trouble with my navigation bar and I need help styling it. I want the navigation bar to have a dropdown menu when the user hovers over the top level of the navigation bar. The issue I am facing is that the second level of the navigation bar ...

htmlcssdrop-down-menu

What is the best way to ensure my checkboxes are positioned on individual lines?

I am trying to vertically align my checkboxes so that each option appears on a separate line. I searched online and found suggestions to use vertical-align: middle, but that only changes the position of the label. I want each checkbox to be displayed on it ...

htmlcsscheckboxvertical-alignment

Having trouble with bootstrap carousel malfunctioning on Firefox browser?

I'm experiencing an issue with the carousel slider on my website. It seems to only be working in Chrome and not in Mozilla Firefox. You can view the live site at: Below is the code I have used for the carousel: <header id="myCarousel" class="car ...

javascriptjquerycsstwitter-bootstrap

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Check out my attempt at solving this challenge on jsfiddle: http://jsfiddle.net/oca3L32h/ In the scenario, there are 3 divs within a main div. Each of these divs contains an image and they overlap each other. By using radio buttons, the visibility of the ...

javascriptjqueryhtmlcssimage

What is the best way to increase the size of this text when an image is hovered over?

I'm looking to make the .thumb_text element grow when hovering over the <img> within the li.thumb_list. Currently, I can only achieve this effect when hovering over the text itself, not the image. In addition, the text is inexplicably becoming ...

htmlcsshover

Blurry text in Webkit browser after applying css transform (translate)

Having an issue with webkit transform. If I don't use -webkit-backface-visibility:hidden ... I notice flickering on many objects when I translate (e.g. -webkit-transform: translate(80%,0)) an object and If I do use -webkit-backface-visibility:hi ...

htmlcsswebkittransformtranslate-animation

The Angular tutorial for the "Tour of Heroes" is experiencing issues with aligning the heroes' list properly

I am currently working on the Angular tour of heroes tutorial. However, I am facing an issue when trying to display the list of heroes as it appears like this: https://i.sstatic.net/AGnzJ.png It is strange because even though the CSS/HTML/TS code from the ...

htmlcssangulartypescript

Can you provide guidance on how to prioritize container div style over CSS class?

Here's the HTML code snippet I'm working with: <html> <head> <style> .text-box { color: red; } </style> </head> <body> <p class=&qu ...

htmlcss

Having trouble making changes to FontAwesome CSS using jQuery?

I am currently working on an MVC project where I am using Ajax to update a specific section of a View that contains a FontAwesome 5 icon. The FontAwesome icons are set using CSS classes, so my initial assumption was that it would be simple to remove and ad ...

jquerycssfont-awesomefont-awesome-5

Setting maximum and minimum zoom limits for an element ID using JavaScript or jQuery

My application features a DIV element with the unique identifier of mainDiv. The issue I am facing is related to zooming functionality, as it currently lacks any set limits - both for scaling up and scaling down. I have been searching on Google for a sol ...

javascriptjqueryhtmlcss

Shifted picture next to the accompanying words

I have successfully created a slideshow of images using JavaScript. <html> <head> <script language="JavaScript"> var i = 0; var path = new Array(); path[0] = "one.jpg"; path[1] = "two.jpg"; function swapImage() { document.slide ...

javascripthtmlcss