Organizar listas em HTML / CSS
-
05-09-2019 - |
Pergunta
Eu tenho uma lista e eu preciso de duas seções em cada item. Eu também preciso a primeira seção a ser de largura fixa. Como deve código que ele?
Eu tentei usar listas de definição:
<dl>
<dt style="width: 2em;">foo</dt><dd>bar</dd>
...
</dl>
... e listas de usuários com envergadura:
<ul>
<li><span style="width: 2em;">foo<span>bar</li>
...
</ul>
Nem funcionou. Há alguma maneira canônica de fazer isso?
Solução
A forma como eu vim com é, talvez, não canônica (mas só porque eu não estou convencido de que não é um meio 'canônico' de implementá-lo), mas ela não funciona:
<style type="text/css" media="screen">
#container
{width: 50%;
margin: 0 auto;
}
ol,
ul {border: 1px solid #ccc;
width: 90%;
padding: 1.4em 0;
}
ol li,
ul li {background-color: #ccc;
margin-left: 20%;
}
ol li span.list-head,
ul li span.list-head
{background-color: #ffa;
float: left;
display: block;
width: 6em;
}
dl {border: 1px solid #ccc;
line-height: 1.4em;
padding: 1.4em 0 0 0;
}
dl dt {background-color: #ffa;
display: block;
margin: 0;
width: 10%;
}
dl dd {background-color: #fc0;
display: block;
margin: 0;
width: 88%;
margin-left: 11%;
position: relative;
top: -1.4em;
}
</style>
...
<div id="container">
<ol>
<li><span class="list-head">Foo:</span> bar.</li>
<li><span class="list-head">Bar:</span> baz.</li>
<li><span class="list-head">Baz:</span> foo.</li>
</ol>
<ul>
<li><span class="list-head">Foo:</span> bar.</li>
<li><span class="list-head">Bar:</span> baz.</li>
<li><span class="list-head">Baz:</span> foo.</li>
</ul>
<dl>
<dt>Foo:</dt>
<dd>bar.</dd>
<dt>Bar:</dt>
<dd>baz.</dd>
<dt>Baz:</dt>
<dd>foo.</dd>
</dl>
</div>
Há um trabalho de demonstração sobre em: http://www.davidrhysthomas.co.uk/so/lists.html .
Outras dicas
Como Alan disse, mas se você só colocar um div que não vai funcionar da maneira que quiser, tente o seguinte:
<ul>
<li><div style="width: 200px; display: inline-block;">foo</div>bar</li>
<li><div style="width: 200px; display: inline-block;">foo12</div>bar</li>
<li><div style="width: 200px; display: inline-block;">foo12345</div>bar</li>
<li><div style="width: 200px; display: inline-block;">foo12345678</div>bar</li>
</ul>
(talvez você gostaria de usar uma classe em vez de repetir o atributo de estilo cada item da lista)
Largura não se aplica a marcas <span>
como eles são inline. Tente substituir o tag com um <div>
ou <p>
ou qualquer outro elemento de bloco.
Use uma dl e flutuar o dt para a esquerda.
<style type="text/css">
dt {clear:left; float:left; width: 8em;}
</style>
<dl>
<dt>foo<dt>
<dd>bar</dd>
<dt>foo1<dt>
<dd>bar1</dd>
<dt>foo12345<dt>
<dd>bar</dd>
</dl>
tentar uma etiqueta para a primeira parte ou um inline div
Eu gostaria de perguntar: é este para representar dados tabulares? Nós fomos doutrinados a pensar que as tabelas HTML são maus, mas para mostrar, assim, uma tabela de dados, eles são perfeitos. Eu vi mais de uma tentativa codificador e duplicar a funcionalidade da tag <table>
usando <div>
s e CSS.
É claro que, se não é, então, por favor, continue. : -)