jdutant/labelled-lists.html

## labelled-lists.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Label list via CSS</title>
  <style type="text/css">
body {
  margin: 20px 100px;
  border: 1px solid gray;
}

/*
List styles to move <label> to the left and replace the bullet

Uncomment the border commands to see the various elements

Note: <label> elements end with a space. The CSS doesn't need
them, but this ensures that the list look reasonably good
even if no CSS styling is applied.
*/
ul {
  list-style-type: none;
}
ul li {
/*  border: 1px solid dimgray;*/
  padding-left: 1em;
}
ul > li > label:first-child{
/*  border: 1px solid blue;*/
  display: inline-block;
  min-width: 3em; /* 2em + padding on li */
  margin-left: -3.5em; /* -(2.5em + padding on li) */
  margin-right: .5em;
  color: blue;
}
ul > li > *:first-child > label:first-child{
/*  border: 1px solid red;*/
  display: inline-block;
  min-width: 3em; /* 2em + padding on li */
  margin-left: -3.5em; /* -(2.5em + padding on li) */
  margin-right: .5em;
  color: red;
}

</style>
</head>
<body>
  <h1>Tests</h1>
  <h2>Inlines list</h2>
  <ul>
    <li><label>(A) </label>My text for that item</li>
    <li><label>(BB) </label>My text for that item</li>
    <li><label>(LongLabel) </label>My text for that item</li>
    <li><label></label>This item has an empty label</li>
    <li>This item has no label</li>
  </ul>
  <h2>Blocks list</h2>
  <ul>
    <li>
      <p><label>(A) </label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.
      <p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
    </li>
    <li>
      <p><label>(BB) </label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.</p>
      <p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
    </li>
    <li>
      <p><label>(Long Label) </label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.</p>
      <p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
    </li>
    <li>
      <p><label></label><strong>This item has an empty label</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.</p>
      <p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
    </li>
    <li>
      <p><strong>This item has no label at all</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.</p>
      <p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
    </li>

  </ul>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Label list via CSS</title>
	<style type="text/css">
	body {
	margin: 20px 100px;
	border: 1px solid gray;
	}

	/*
	List styles to move <label> to the left and replace the bullet

	Uncomment the border commands to see the various elements

	Note: <label> elements end with a space. The CSS doesn't need
	them, but this ensures that the list look reasonably good
	even if no CSS styling is applied.
	*/
	ul {
	list-style-type: none;
	}
	ul li {
	/* border: 1px solid dimgray;*/
	padding-left: 1em;
	}
	ul > li > label:first-child{
	/* border: 1px solid blue;*/
	display: inline-block;
	min-width: 3em; /* 2em + padding on li */
	margin-left: -3.5em; /* -(2.5em + padding on li) */
	margin-right: .5em;
	color: blue;
	}
	ul > li > *:first-child > label:first-child{
	/* border: 1px solid red;*/
	display: inline-block;
	min-width: 3em; /* 2em + padding on li */
	margin-left: -3.5em; /* -(2.5em + padding on li) */
	margin-right: .5em;
	color: red;
	}

	</style>
	</head>
	<body>
	<h1>Tests</h1>
	<h2>Inlines list</h2>
	<ul>
	<li><label>(A) </label>My text for that item</li>
	<li><label>(BB) </label>My text for that item</li>
	<li><label>(LongLabel) </label>My text for that item</li>
	<li><label></label>This item has an empty label</li>
	<li>This item has no label</li>
	</ul>
	<h2>Blocks list</h2>
	<ul>
	<li>
	<p><label>(A) </label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.
	<p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
	</li>
	<li>
	<p><label>(BB) </label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.</p>
	<p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
	</li>
	<li>
	<p><label>(Long Label) </label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.</p>
	<p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
	</li>
	<li>
	<p><label></label><strong>This item has an empty label</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.</p>
	<p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
	</li>
	<li>
	<p><strong>This item has no label at all</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nibh massa. Pellentesque euismod nibh at rhoncus vestibulum. Sed quis gravida sapien. Morbi eget ipsum erat. Proin interdum eget odio eget porttitor.</p>
	<p>Nullam blandit, diam a tempor lobortis, turpis enim maximus nunc, in pharetra ipsum massa in nibh. Phasellus aliquam lacus molestie, congue mi ut, faucibus lectus. In in posuere quam. Fusce bibendum sapien vel ex rhoncus, in pellentesque lacus condimentum.</p>
	</li>

	</ul>

	</body>
	</html>