CODEWITHSUNDEEP
htmlcsshtml-lists
SaturnsEye
SaturnsEye

Reputation: 6509

adding margin-left to a block of text

I am trying to use margin-left:20px; to nudge a bullet point list that I have in the middle of my webpage inwards by 20px.

<li>• Service level agreements to match your needs from next business day response to a two hour fix</li>
<li>• 24x7x365 service coverage</li>
<li>• Dedicated client management and UK based service des</li>
<li>• Network of fully qualified engineers and strategic stock locations</li>

I'm doing this by adding a style to li, which works perfectly but I am also using <li> in my navbar at the top of my website, so by styling li it also nudges my navbar over by 20px.

I tried to use <span>...</span> around my list and add the style to that but this only nudges the top line and not the rest.

I didn't want to add a class or ID to every <li> as this kind of defeats the point of having a simply way to nudge my lists over.

Thanks in advance

Upvotes: 1

Views: 85

Answers (4)

Pat Dobson
Pat Dobson

Reputation: 3299

Another way of doing this, if you're absolutely sure that you don't want to have extra classes is to specifically target the list you want moved by targeting it's containing element (if available).

e.g. HTML

<nav>
  <ul><li>...</li></ul>
</nav>

<div class="middleContent">
  <ul><li>...</li></ul>
</div>

CSS

.middleContent ul{ margin-left: 20px; }

That will ignore the UL in the nav tag and target only the UL (or UL's) within the .middleContent DIV.

Upvotes: 0

Daniel
Daniel

Reputation: 303

Use a class for your list

HTML

<ul class="listWithMargin">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

CSS

.listWithMargin li {
    margin-left:20px;
}

As a result the margin will only effect lists which are marked with the class "listWithMargin"

Upvotes: 0

Nitesh
Nitesh

Reputation: 15779

Use class specificity selector to achieve this.

For Instance,

<ul class="justBullets">
<li>Service level agreements to match your needs from next business day response to a two hour fix</li>
<li>24x7x365 service coverage</li>
<li>Dedicated client management and UK based service des</li>
<li>Network of fully qualified engineers and strategic stock locations</li>
</ul>

The CSS:

.justBullets li{margin-left:20px;}

Hope this helps.

Upvotes: 2

Elmer
Elmer

Reputation: 259

If you do not want to add ids or classes, you can apply the style to all li and on the last line of your CSS stylesheet, remove the nudge from the navbar's li.

li {
 margin-left: 20px;
}

nav li {
 margin-left: 0px;
}

Upvotes: 0

Related Questions