Listitem Disc Displaying at Vertical Bottom

ListItem disc displaying at vertical bottom

It looks like vertical-align: text-top; will do what you want (see spec). I believe the reason is that you are creating tall inline blocks that are aligning to the top of the box which is being pushed up by the tall inline box so aligning to top doesn't do what you want. However, I believe that using text-top will align it with the top of where the text is (and the bullet point).

http://jsfiddle.net/Yayuj/ is a fiddle that does what you want (I believe) and has primarily this updated section from your CSS:

#billing_form .discount .item
{
    display: inline-block;
    width: 190px;
    vertical-align: text-top;
}

Any other differences to what you have pasted above should be cosmetic.

Disc to left of list item is displayed at bottom

It appears that the width CSS property triggers hasLayout for the li element in IE7. First try removing the width:100%; declaration to make sure the bullet appears in the correct place. If you can't do without the width property, you can use position: relative; and vertical-align: top; to move the bullet back into place, as outlined at http://www.gunlaug.no/tos/moa_26.html.

Note that the code on that page uses hacks to target IE6 and IE7. I recommend using conditional comments instead, like so:

<!--[if IE 7]>
  <style type="text/css" media="screen">
    /* IE7-specific CSS here */
  </style>
<![endif]-->

Getting rid of disc in list item

Have you added the list-style:none to the ol/ul tag containing the li tag? Sometimes, browsers require the list-style attribute to be placed on the list rather than an individual list element.

Position the li dot at the top

You should vertically align the content within the <li>, not the bullet itself. Try this:

li > * {
    vertical-align: text-top;
}

Note: You may need to adjust the selector; what I have only applies the rule to the immediate children of each <li>. Make it more or less specific according to your needs.

An updated fiddle.

Ordered list rendered as flexbox doesn't show bullets/decimals (items also rendered as flexbox)

list-style applies to elements with display: list-item only – so by making your LI display: flex, you are removing the prerequisite for list-style to have any effect.

Using a counter is probably your best bet here.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

list item highlighted but not the entire row

By default most of HTML tags has some default styling, same is here in ul tag and that's the reason that when you hover li tags the left-side is not highlighted.

Default ul styling,

ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

$(document).ready(function() {

  var $region = $('#regionList');

  $region.append('<li id="Europe">Europe</li>');

  $region.append('<li id="Japan">Japan</li>');

  $region.append('<li id="North America">North America</a></li>');

  $("#regionList li").click(function() {

    alert('Clicked list. ' + this.id);

  });

})

    /* Dropdown Button */

    .dropbtn {

      background-color: #9FACEC;

      color: white;

      padding: 16px;

      font-size: 16px;

      border: none;

    }

    /* The container <div> - needed to position the dropdown content */

    .dropdown {

      position: relative;

      display: inline-block;

    }

    ul {

      padding: 0px;

      margin: 0px;

    }

    /* Dropdown Content (Hidden by Default) */

    .dropdown-content {

      display: none;

      position: absolute;

      background-color: #f1f1f1;

      min-width: 160px;

      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

      z-index: 1;

    }

    /* Links inside the dropdown */

    .dropdown-content li {

      color: black;

      padding: 12px 16px;

      text-decoration: none;

      display: block;

    }

    /* Change color of dropdown links on hover */

    .dropdown-content li:hover {

      background-color: #ddd;

    }

    /* Show the dropdown menu on hover */

    .dropdown:hover .dropdown-content {

      display: block;

    }

    /* Change the background color of the dropdown button when the dropdown content is shown */

    .dropdown:hover .dropbtn {

      background-color: #4C66E9;

    }

    .selected {

      background: #FF00FF;

    }

/*Add this*/

ul{

  padding-left:0px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dropdown">

  <button class="dropbtn">Regions</button>

  <div class="dropdown-content">

    <ul id="regionList"></ul>

  </div>

</div>

Align a list and push text to the bottom

UPDATE

Check this updated fiddle that uses the markup as in your question: http://jsfiddle.net/techfoobar/hmCuj/

Solution logic is basically remains the same.

---

Check this fiddle: http://jsfiddle.net/techfoobar/5hhdE/1/

HTML

<ul class="headings">
    <li>Heading #1. Heading #1. Heading #1. Heading #1. Heading #1. </li>
    <li>Heading #2</li>
    <li>Heading #3. Heading #3. Heading #3. Heading #3. Heading #3. Heading #3. Heading #3.</li>
</ul>
<ul class="matter">
    <li>Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. </li>
    <li>Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. </li>
    <li>Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. </li>
</ul>

CSS

ul.headings, ul.matter {
    list-style-type: none;
    vertical-align: bottom;
    white-space: nowrap;
}
ul.headings li {
    font-size:15px;
    font-weight: bold;
    border-bottom: 2px solid #888888;
    display: inline-block;
    padding: 5px 0;
    white-space: normal;
    width: 33.3%;
}
ul.matter li {
    width: 33.3%;
    display: inline-block;
    white-space: normal;
}

Got the idea from this post: How can I positioning LI elements to the bottom of UL list

---

Related Topics