How to adjust the bullet in this UI but i need bullets

Question

hi i am building a basic UI in which i have a undordered list in which three list are there my code is as follows

<!DOCTYPE html>
<html>

<body>
  <ul style="padding-bottom:30px;display:flex;">
    <li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;padding-left:30;"><a href="WorkingHours.html" target="iframea">Working hours</a>
    </li>
    <li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.8;"><a href="overspeed.html" target="iframea">overspeed</a>
    </li>
    <li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.8;"><a href="costanalysis.html" target="iframea">Cost Analysis</a>
    </li>

  </ul>
  <iframe id='iframea' name='iframea' style='width:100%;height:300px;border-radius:25px;padding-top:100px;opacity:0.8;box-shadow: 10px 10px 5px black;border:2px solid #fff;background-color:#88ff4d'>
  </iframe>
</body>

</html>

but the problem i am facing is that while getting all in one line as a tab the bullets are not fitting properly as you can see in image

Possible duplicate of [Need an unordered list without any bullets](http://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets) — timo, Feb 01 '16 at 10:27

score 2 · Answer 1 · answered Feb 01 '16 at 10:27

2

If I understand the question correctly, add this CSS to your UL:

ul {
list-style: none;
padding-left: 0;
}

answered Feb 01 '16 at 10:27

Karl Dawson

967
5
15

i want those bullets but it should fit perfectly – deepak arya Feb 01 '16 at 10:31

score 1 · Accepted Answer · answered Feb 01 '16 at 10:32

1

list-style-position: inside; will move the bullets inside.

ul {
  list-style-position: inside;
}
/* DEMO */

ul {
  display: flex;
}
li {
  border: solid 1px;
  margin: .7em;
  padding: .4em;
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

answered Feb 01 '16 at 10:32

Aaron

10,187
3
23
39

you're welcome, I'm not sure the others read your question properly. – Aaron Feb 01 '16 at 10:38

score 0 · Answer 3 · answered Feb 01 '16 at 10:28

Try this but I am strongly recommending you to use external css file when coding.

<!DOCTYPE html>
<html>

<body>
  <ul style="padding-bottom:30px;display:flex;padding:0;list-style-position: inside;">
    <li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;"><a href="WorkingHours.html" target="iframea">Working hours</a>
    </li>
    <li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.8;"><a href="overspeed.html" target="iframea">overspeed</a>
    </li>
    <li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.8;"><a href="costanalysis.html" target="iframea">Cost Analysis</a>
    </li>

  </ul>
  <iframe id='iframea' name='iframea' style='width:100%;height:300px;border-radius:25px;padding-top:100px;opacity:0.8;box-shadow: 10px 10px 5px black;border:2px solid #fff;background-color:#88ff4d'>
  </iframe>

  <script>
  </script>
</body>

</html>

actually i want bullets outside the box with this i am getting inside?? is it possible that way ?? — deepak arya, Feb 01 '16 at 10:32

score 0 · Answer 4 · answered Feb 01 '16 at 10:35

Use list-style-position: inside; to place the bullet inside. Remove height from <li> and add padding-top and padding-bottom for the <li>.

<!DOCTYPE html>
<html>

<body>
  <ul style="padding-bottom:30px;display:flex;">
    <li style="width:300px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;padding:15px 0;list-style-position: inside;"><a href="WorkingHours.html" target="iframea">Working hours</a>
    </li>
    <li style="width:300px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;padding:15px 0;list-style-position: inside;"><a href="overspeed.html" target="iframea">overspeed</a>
    </li>
    <li style="width:300px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;padding:15px 0;list-style-position: inside;"><a href="costanalysis.html" target="iframea">Cost Analysis</a>
    </li>

  </ul>
  <iframe id='iframea' name='iframea' style='width:100%;height:300px;border-radius:25px;padding-top:100px;opacity:0.8;box-shadow: 10px 10px 5px black;border:2px solid #fff;background-color:#88ff4d'>
  </iframe>

  <script>
  </script>
</body>

</html>

How to adjust the bullet in this UI but i need bullets

4 Answers4