How can I get my unordered list to be left-aligned?

Question

I'm trying to create in-page navigation menu by styling ul & li with CSS. With the help of previous answers and a lot of trial and error, I've nearly done it - but can't get the top line to align to the left. Instead, it's indented a little bit with extra space somehow.

The real page I'm trying to update is below:

https://l-a-m.org/pages/banstead

Could anyone tell me where I'm going wrong please?

ul,
li {
  list-style-type: disc;
  text-align: left;
  padding-inline-start: 0;
  min-width: fit-content;
  padding-right: 2em;
  padding-top: 1em;
  align-self: flex-end;
  color: #363535;
}

li:hover {
  color: #363535;
  border-bottom: transparent 1px !important;
}

ul.tabbies {
  display: flex;
  flex-wrap: wrap;
  max-width: auto;
  margin: auto;
  text-align: left;
  text-transform: uppercase;
  justify-content(flex-start);
  align-items(stretch);
  align-self: flex-end;
  color: #363535;
}

.tabbies .active {
  color: #c70000;
  text-transform: uppercase;
}

.tabbies li {
  text-align: left;
  text-transform: uppercase;
  list-style: none;
}

.tabbies li a {
  text-decoration: none;
  text-align: left;
  color: #363535;
}

.tabbies li:hover {
  color: #c70000;
  text-transform: uppercase;
  border-bottom: solid #000 1px !important;
}

<ul class="tabbies">
    <ul class="tabbies">
        <li><a href="https://www.l-a-m.org/pages/associate-only-rides">Rides</a></li>
        <li><a class="active" href="https://www.l-a-m.org/pages/banstead">Locations</a></li>
        <li><a href="https://www.l-a-m.org/pages/norfolk">Training Weekends</a></li>
        <li><a href="https://www.l-a-m.org/pages/local-observer">Observers</a></li>
    </ul>
</ul>
<ul class="tabbies">
    <li><a class="active" href="https://www.l-a-m.org/pages/banstead">Banstead</a></li>
    <li><a href="https://www.l-a-m.org/pages/tatsfield">Tatsfield</a></li>
</ul>

Are we supposed to guess the difference between what you want to achieve and the rendered result? — tao, Feb 10 '23 at 21:43
Apologies @tao, I forgot to add this link [link](https://l-a-m.org/pages/banstead) It's an example of the in-page navigation currently used ... except it's using scss. I'm trying to achieve the same horizontal in-page nav using css, but failing miserably — mark clarke, Feb 10 '23 at 22:18
SCSS is a different way of writing CSS, but it still compiles into valid CSS, because browsers only understand CSS. Use [The Sass Playground](https://www.sassmeister.com/) to translate SCSS into CSS. — tao, Feb 10 '23 at 22:24

score 1 · Accepted Answer · edited Feb 18 '23 at 21:37

1

It turned out to be easier than I expected with a change in the 'margin' parameter:

ul.tabbies {
  display: flex;
  flex-wrap: wrap;
  max-width: auto;
  margin: 0px;
  text-align: left;
  text-transform: uppercase;
  justify-content(flex-start);
  align-items(stretch);
  align-self: flex-end;
  color: #363535;
}

Changing 'margin: auto' to 'margin: 0px' was all it needed

edited Feb 18 '23 at 21:37

TylerH

20,799
66
75
101

answered Feb 18 '23 at 21:34

mark clarke

41
6

score 0 · Answer 2 · answered Feb 10 '23 at 22:05

I would imagine you're looking for something like this:

ul {
  display: flex;
}

li {
  padding-right: 2em;
  padding-top: 1em;
  color: #363535;
  position: relative;
}

ul li ul {
  border: 1px pink solid;
  position: absolute;
  top: 100%;
}

I'm guessing that you're gearing up for the sub menu to appear on hover. In that case, positioning the inner beneath the top level nav is quite useful.

score 0 · Answer 3 · answered Feb 11 '23 at 06:31

Try adding class the first ul and using > to define the exact child within the parent

What is happening here is that when you enter between two tags in css that means to apply the following style to all children are within the called tag even nested child.

Where as for > it only applies to the direct child.

ul.main_ul > li {
  display: inline-block;
  text-align: left;
  min-width: fit-content;
  padding-right: 2em;
  padding-top: 1em;
  color: #363535;
}

ul.main_ul > li > ul > li {
  display: inline-block;
}

<ul class="main_ul">
  <li><a href="https://example.com">Rides</a>
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li><a href="https://example2.com">Locations</a></li>
  <li><a href="https://example3.com">Observers</a></li>
</ul>

How can I get my unordered list to be left-aligned?

3 Answers3