CODEWITHSUNDEEP
htmlcssstyleshtml-lists
user1868388
user1868388

Reputation: 33

CSS <ul><li> indent problems

I want to modify unordered lists on my website so that when the text is wrapped to the next line within one <li> it is indented according to the line above. I tried many different ways but nothing seems to be working. I don't have much experience with css so I might just be missing something simple...

.entry ul li{ list-style:disc inside none !important; padding:5px 0px }

Upvotes: 3

Views: 8938

Answers (3)

101dolmations
101dolmations

Reputation: 9

no "rauberdaniel" thats a waste of time, anyways i found out why my UL tags in my source code wouldn't work with the h2 and h7 in the UL tags ... because i edited all of the min.css and default.css classes that my source code calls but it was for this drop down menu but.... what i failed to see when editing all of the .css folders ... there was a menu.js that controlled the main menu functionality... DUH!!! thought it was a general purpose function in one of the (JavaScript)libraries but surely it was there.... this was a template i downloaded and edited.....and the js code is below after the source code calls....

<div id="MainMenu">
<ul id="MegaMenu">
<li>  <h2 class="question">Mechanical</h2>
<div>
<p> ......urthrtfhfthth</p>
</div>


function megaHoverOver(){

  // show effect
  $(this).find(".sub").stop().slideDown();

  // render cufon on headings again (because it wasn't visible before)
  Cufon.replace('#MainMenu h2', { fontFamily: 'Vegur' });

  //Calculate width of all ul's
  (function($) { 
    jQuery.fn.calcSubWidth = function() {
      rowWidth = 0;
      //Calculate row
      $(this).find("ul").each(function() {                  
          rowWidth += $(this).width(); 
      });   
    };

i feel so stupid b/c i spent an hour and half searching the plain CSS styles.. dumb waste of time ....but there it is (h2)... now to add and h7 which i added into the css styles ALLL because i wanted the text smaller than the title describing the point and click drop down button in the HTML site.

Upvotes: -1

Uttam Kadam
Uttam Kadam

Reputation: 458

It's not indented properly because its not on single line. please add <p> tag inside your <li> and padding to <p> tag from left side like :

.entry ul li p{
   padding: 0px 0px 0px 10px;
}

Upvotes: 1

danwellman
danwellman

Reputation: 9253

It's because the list-style style has inside as part of the declaration.

Take this off and then adjust the margin-left to push the whole list item to the right, and then padding to separate the text from the list item bullet. Something like this should do it:

.entry ul li {
    list-style: disc !important;
    margin-left: 20px;
    padding: 3px 0 0 5px;
}

Upvotes: 2

Related Questions