Question 225464 in Html Question posted in
Some basic documentation can be found here.

Html – My bullet points of <li> items keep showing outside my body border

I was trying to make a resume and wanted to put a border around the body, but my bullet points keep showing outside the border, I tried adding padding-left to them but it still does not work. Is there an issue with the code or is it a browser issue? Using firefox to see the results

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rohan Resume</title>
</head>

<body style="background-color:#e1d6e1; width: 80%; margin: auto; border: 1px solid black;">
  <fieldset>
    <h1 style="text-align: center;margin-bottom: 10px;">Rohan Desai</h1>
    <h3 style="color: blue;text-align: center;">Web Developer</h3>
    <p style="display: inline-block;margin-right: 20 px;margin-left: 20%;;">9099030393</p>
    <p style="display: inline-block;margin: 20px;">[email protected]</p>
    <p style="display: inline-block;"><a href="">LinkedIn</a></p>
  </fieldset>
  <h2>Qualifications</h2>
  <hr>
  <h3 style="display: inline-block;">B.Tech Electronics and Communication, 2024</h3>
  <h5 style="color: brown;margin: 0%;">Nirma University</h5>
  <hr>
  <h2>Skills</h2>
  <hr>
  <li style="float: inline-start;margin-right: 30px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: visible;"> <em>HTML</em> </li>
  <li style="float: left;margin-right: 30px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: visible;"><em>CSS</em></li>
  <li style="float: left;margin-right: 30px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: visible;"><em>JavaScript</em></li>
  <li style="float: left;margin-right: 30px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: visible;"><em>Python</em></li>
  <li style="float: left;margin-right: 30px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: visible;"><em>C/C++</em></li>
  <li style="margin-right: 30px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;"><em>SQL</em></li>
  <hr>
  <h2>Projects</h2>
  <hr>
  <li style="padding-left: 5px;"><b>Genre detection using ML</b></li>
  <p>Used Deep Learning model to detect genre of music using frequency and amplitude of the given audio</p>
  <li style="padding-left: 5px;"><b>Analysis of different Cache Replacement Policies using Python</b></li>
  <p>Analysis of FIFO, LIFO, LRU and LFU replacement policies using python for several test cases and charting their results to find the most optimal policy.</p>
  <hr>
  <h2>Experience</h2>
  <hr>
  <li>Web Development intern at CodeHub llp(Summer,2024)</li>
</body>

</html>
Tags:

2

Answers


  1. 0

    You can give margin of 20px to each elements of your bullet points
    Just add this to every style attribute of your list margin-left:20px;
    You can also disable the bullet points just by adding list-style:none; to every style attribute of your list

    Login or Signup to reply.
  2. 0

    You should use list like this:

    // unordered list
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
    
// ordered list
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

    Thus should be solved your problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search