sata-inline-list($font-size, $min-height:false, $outer-width: false, $inner-width: false, $element-width: false, $element-margin: false, $count-in-row: false)

A list of elements (inline). Some parameters can be calculated automatically. For elements without specify height.

$font-size - must specify, because font-size of container set to 0
$min-height - minimum height of element
for another parameters and dimension calculates read sata-list

Html markup

<div class="outer-list">
	<ul class="inner-list">
		...
		<li class="element"></li>
		...
	</ul>
</div>

Examples

$element-width, $element-margin and $count-in-row

Source

#sata-inline-list-example {
	@include sata-inline-list($font-size: 18px, $min-height: 50px, $outer-width: 1000px, $element-width: 200px, $element-margin: 25px);
}

Result

#sata-inline-list-example {
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	letter-spacing: -1px;
	width: 800px;
}

#sata-inline-list-example > ul {
	margin: 0;
	padding: 0;
	border: 0;
	*zoom: 1;
}

#sata-inline-list-example > ul:after {
	content: "";
	display: table;
	clear: both;
}

#sata-inline-list-example > ul > li {
	list-style-image: none;
	list-style-type: none;
	margin-left: 0;
	min-height: 50px;
	_height: 50px;
	font-size: 18px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	line-height: normal;
	letter-spacing: normal;
}

#sata-inline-list-example > ul {
	width: 850px;
	margin-left: -25px;
}

#sata-inline-list-example > ul > li {
	width: 200px;
	margin-left: 25px;
	margin-right: 25px;
}

#sata-inline-list-example li {
	background-color: greenyellow;
	margin: 10px;
}
  • some text
  • some text some text some text some text some text some text some text
  • some text
  • some text
  • some text