Increase the nestling of bullet points with inner indentation <li>

Hey there, I'm currently facing an issue with the right-side indentation of the bullet points.

I have included a code snippet and an image that should help clarify the situation:

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

 <h1 style="display: block;margin: 0;padding: 0;color: #000000;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;"><span style="font-size:28px"><strong><span style="color:#96c11f">Why now</span></strong></span></h1>    
<ul>
<li><span style="font-size:16px">Increase in buyers looking for businesses over the Christmas period.</span></li>
<li><span style="font-size:16px">More sales agreed in January so be on the market in time.</span></li><br>
</ul>

htmlcss

Answer №1

Consider adjusting the margin and padding of the li element to control the position of the bullet point in relation to the text.

h1 {
  display: block;
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-style: normal;
  font-weight: bold;
  line-height: 125%;
  letter-spacing: normal;
  text-align: left;
  font-size: 28px;
  color: #96c11f;
  font-weight: bold;
}
ul {
  font-size: 16px;
  padding:0;
  margin-top:0;
}
ul li{
  margin-left:1em;
  padding-left:0;
}
<h1>Why now</h1> 
<ul>
  <li>Increase in buyers looking for businesses over the Christmas period.</li>
  <li>More sales agreed in January so be on the market in time.</li>
  <br>
</ul>

Answer №2

Your HTML format is not valid, as <li> can only be used inside of <ol> or <ul> tags. If you are trying to remove the white space before the <li>, you can use the following methods.

li { **display:flex;** }


li{
  display:flex;
  }
<h1 style="display: block;margin: 0;padding: 0;color: #000000;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;"><span style="font-size:28px"><strong><span style="color:#96c11f">Why now</span></strong></span></h1> 
<li><span style="font-size:16px">Increase in buyers looking for businesses over the Christmas period.</span>
</li>
<li style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"><span style="font-size:16px">More sales agreed in January so be on the market in time.</span>
</li>
<br>

or li { display:block; float:left; }

li{
    display:block;
    float:left;
  }
<h1 style="display: block;margin: 0;padding: 0;color: #000000;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;"><span style="font-size:28px"><strong><span style="color:#96c11f">Why now</span></strong></span></h1> 
<li><span style="font-size:16px">Increase in buyers looking for businesses over the Christmas period.</span>
</li>
<li style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"><span style="font-size:16px">More sales agreed in January so be on the market in time.</span>
</li>
<br>

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 steps should I take to resolve the textarea border bottom CSS effect?

My simple border bottom animation is working fine with a basic input element, but it's not functioning properly when used with a textarea. (If using JavaScript is necessary for a solution, please provide guidance) How can I adjust the height of a te ...

javascripthtmlcss

Executing JavaScript function from external SVG file globally

I am working on an HTML page that includes an external JavaScript module <script type="text/javascript" src="js/js.js"></script> and also an external SVG map called "img/map.svg". My goal is to create clickable objects on the map that will t ...

javascriptjqueryhtmlsvg

What is the best way to add 1 to a number every second with javascript?

My code seems to be functioning correctly, but I'm having trouble setting the delay and stopping the increment after a certain interval. Can someone please assist me with this? Javascript: $(document).ready(function() { var number = parseInt($(& ...

javascripthtml

What is the best way to customize the background color of a highlighted ToggleButton in react-bootstrap?

Currently, I'm using react-bootstrap and facing a challenge in changing the background color of a chosen <ToggleButton> to blue. For instance: <ButtonToolbar> <ToggleButtonGroup type="radio" name="options" ...

cssreactjsreact-bootstrap

Unable to Locate CSS File for MAVEN Web Project Using JSF

https://i.sstatic.net/I5vKT.png What is the correct way to reference it in XHTML? I have seen conflicting information online - some say the file should be placed as shown in the image above, while others mention needing to map resources in servlet-config. ...

cssmavenjsfresources

Guide to executing specific functions based on selected dropdown options in Angular 5

Several drop down menus need to be implemented. The requirement is that when an option from the drop-down is selected, a corresponding custom function should be called. However, in the code below, what should replace opt.mtd since it is not functioning as ...

htmlangulartypescript1.7

Conflict with choosing options identified when using Select Box on IOS iPad mini

I am currently attempting to display a select box with scrolling on an iOS iPad mini. Issue: The options are not appearing inside the select box, instead they are overflowing outside of it in the popover. CSS .indicators_geography { font-size: 12px; ...

ioshtmlcssipad

Using Chrome in Application Mode with Shortcuts Disabled

When trying to utilize Chrome in application mode as a host for an HTML5 application, it becomes evident that there are significant limitations. For instance, pressing CTRL+T launches a new Chrome browser window, allowing the user to input text into the a ...

htmlgoogle-chrome

Strategies for Locating XPath Using Text Content within Table Cells (td / tr)

Need help with searching for specific text within a large HTML table of emails and selecting a button within the element? You can easily find the table body via XPATH by using: //*[@id="reportList"]/tbody Within this table, there are multiple rows (tr). ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

What could be causing my CSS not to update properly in the web browser?

During the process of coding my website, I have noticed a peculiar issue. Whenever I save my HTML and CSS documents and refresh my browser, I am able to see the changes in the HTML right away. However, the changes in the CSS do not seem to take effect imme ...

css

A guide to showcasing JSON data on a webpage using JavaScript

I am currently working on a SOAP WSDL invocation application in MobileFirst. The response I receive from the SOAP WSDL is in JSON format and is stored in the result variable. When trying to access the length of the response using result.length, I encounter ...

javascripthtmljson

The `background-size` property in jQuery is not functioning as expected

I am facing the following issue: When I click on a div with absolute positioning, I want to animate its position, width, and height. In addition, I want to change the background-size using jQuery. However, the problem is that all CSS properties are updat ...

javascriptjqueryhtmlcss

Is the "footer" div automatically nested within the "main" div if they are not nested in the code?

Within my code structure, I currently have the following: <html> <head> ... </head> <body> <div id="body"> <div id="main"> ... </div> <div id="foot ...

htmlcss

When incorporating script tags in React, an "Unexpected token" error may arise

I am in the process of converting my website to a React site, but I am encountering an issue with the script tags not working. It keeps showing an unexpected token error. Here is the code snippet: <div className="people"> How many people are you ...

javascripthtmlreactjs

Subpar resolution of PNG images displayed in HTML canvas

My attempt to draw a PNG image onto the canvas is resulting in poor quality. I am using the drawImage method as shown below: src = folder+self.cur+".png"; imageObj.src = src; imageObj.onload = function() { context.clearRect(0, 0, cv, ch), context.drawImag ...

javascripthtmlcanvaspngdrawimage

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

I have a functioning code snippet, but it seems to be missing a crucial part when dealing with URLs such as www.mysite.com/home/. It works perfectly fine if the URL ends with index.aspx, like www.mysite.com/home/index.aspx, but fails when that part is omit ...

javascriptjqueryhtmlurlwindow.location

To switch to desktop mode, double click; for mobile view, just tap once

I am looking to implement 2 different gestures for a specific feature in my application. Ideally, I want users to be able to double click on a card to open it in desktop view, but if they are using a phone, a single tap should suffice. How can I achieve th ...

cssreactjstypescriptmaterial-ui

HTML element resizing unexpectedly due to browser interactions

I recently created a sleek HTML transparent header bar using the following CSS: #head-bar{ position:fixed; top: 0px; width:100%; left:0px; min-height:25%; z-index:2; background-color:#000; background: rgba(0, 0, 0, 0.5); } ...

javascriptjqueryhtmlcss

Is it possible to use Selenium with Python for copying and pasting

Is there a way to use control + A in Selenium Python to select text and then retrieve the highlighted text? ...

javascriptpythonhtmlselenium-webdriverweb-scraping

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss