diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 35cfe82407f50e41cec5795f284b264f5f8ba068..b2675f6403dd280760cde96192a483226d8127d6 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -816,33 +816,14 @@ ol.unstyled { ul.inline, ol.inline { - *zoom: 1; -} - -ul.inline:before, -ol.inline:before, -ul.inline:after, -ol.inline:after { - display: table; - line-height: 0; - content: ""; -} - -ul.inline:after, -ol.inline:after { - clear: both; + list-style: none; } ul.inline > li, ol.inline > li { - float: left; - margin-right: 14px; - margin-left: 12px; -} - -ul.unstyled.inline > li, -ol.unstyled.inline > li { - padding-left: 0; + display: inline-block; + padding-right: 5px; + padding-left: 5px; } dl { diff --git a/docs/base-css.html b/docs/base-css.html index 8cc571210c33d869f0416c2036776c26124d57f8..dd34401d547b098d6407706264a64e31bb9ded4f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -377,16 +377,16 @@ </pre> <h3>Inline</h3> - <p>A list of floated left items. Can be combined with with <code>.unstyled</code></p> + <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p> <div class="bs-docs-example"> - <ul class="unstyled inline"> - <li><span class="label label-important"> </span> Stop signal</li> - <li><span class="label label-warning"> </span> Prepare for signal</li> - <li><span class="label label-success"> </span> Go!</li> + <ul class="inline"> + <li>Lorem ipsum</li> + <li>Phasellus iaculis</li> + <li>Nulla volutpat</li> </ul> </div> <pre class="prettyprint linenums"> -<ul class="unstyled inline"> +<ul class="inline"> <li>...</li> </ul> </pre> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 38201f68349c80e39ff77298c02e6afa586cadef..6fc646e8c86f2a2c91fdd649c728a1687d70dbdb 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -314,16 +314,16 @@ </pre> <h3>{{_i}}Inline{{/i}}</h3> - <p>{{_i}}A list of floated left items. Can be combined with with <code>.unstyled</code>{{/i}}</p> + <p>{{_i}}Place all list items on a single line with <code>inline-block</code> and some light padding.{{/i}}</p> <div class="bs-docs-example"> - <ul class="unstyled inline"> - <li><span class="label label-important"> </span> Stop signal</li> - <li><span class="label label-warning"> </span> Prepare for signal</li> - <li><span class="label label-success"> </span> Go!</li> + <ul class="inline"> + <li>Lorem ipsum</li> + <li>Phasellus iaculis</li> + <li>Nulla volutpat</li> </ul> </div> <pre class="prettyprint linenums"> -<ul class="unstyled inline"> +<ul class="inline"> <li>...</li> </ul> </pre> diff --git a/less/type.less b/less/type.less index d23ecc917f589220a53e92a37fdc0f47a558eac5..0d5b9c37ee5f9e6ee05aecf457a45b76e759bfcc 100644 --- a/less/type.less +++ b/less/type.less @@ -106,25 +106,23 @@ ol ul { li { line-height: @baseLineHeight; } + +// Remove default list styles ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; } + +// Single-line list items ul.inline, ol.inline { - .clearfix(); -} -ul.inline > li, -ol.inline > li { - float: left; - margin-right: 14px; - margin-left: 12px; -} -// Reset left padding for unstyled -ul.unstyled.inline > li, -ol.unstyled.inline > li { - padding-left: 0; + list-style: none; + & > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } } // Description Lists