列中的HTML项目符号

Question

这样我可以尝试一些不同的布局/设计等等，请你帮我解决如何一个接一个地获取所有子弹点。

请参阅上图，了解我希望它的外观。一行上的所有项目符号都在页面上。

以下是我目前拥有的内容，以及我希望在页面中均匀分布的项目符号中显示的内容。

<a href="http://stores.ebay.co.uk/Signware/For-Walls-/_i.html?
_fsub=1806276619&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" 
style="color:#000000">- Wall Display Systems  

<a href="http://stores.ebay.co.uk/Signware/For-Windows-/_i.html?
_fsub=1806276419&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" 
style="color:#000000">- Window Display Systems

<a href="http://stores.ebay.co.uk/Signware/For-Ceilings-/_i.html?
_fsub=1806276519&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" 
style="color:#000000">- Ceiling Display Systems

<a href="http://stores.ebay.co.uk/Signware/For-Floors-/_i.html?
_fsub=1806276719&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" 
style="color:#000000">- Floor Display Systems

<a href="http://stores.ebay.co.uk/Signware/Merchandising-
Accessories-/_i.html?_fsub=1806276819&_sid=1601798509&_trksid=p4634.c0.m322" 
target="_blank" style="color:#000000">- In-Store Displays

<a href="http://stores.ebay.co.uk/Signware/Signware-Exlusive-/_i.html?
_fsub=1806280119&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" 
style="color:#000000">- Signware Exclusive
</a></p>

我可以做正常的垂直BP但不在列中。

Answer 1

您可以使用float来获取此信息：

＆＃13;

＆＃13;

ul li {
  float: left;
  margin-right: 25px;
}

＆＃13;

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

  

请注意我添加的margin-right。

Answer 2

试试这个：

    <style>
    div {
        width: 600px;
        margin: auto;
     }

     li {
        display: inline-block;
}
</style>

<div>
    <ul>
    <li><a href="http://stores.ebay.co.uk/Signware/For-Walls-/_i.html?_fsub=1806276619&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" style="color:#000000">Wall Display Systems</a></li>
    <li><a href="http://stores.ebay.co.uk/Signware/For-Windows-/_i.html?_fsub=1806276419&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" style="color:#000000">Window Display Systems</a></li>
    <li><a href="http://stores.ebay.co.uk/Signware/For-Ceilings-/_i.html?_fsub=1806276519&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" style="color:#000000">Ceiling Display Systems</a></li>
    <li><a href="http://stores.ebay.co.uk/Signware/For-Floors-/_i.html?_fsub=1806276719&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" style="color:#000000">Floor Display Systems</a></li>
    <li><a href="http://stores.ebay.co.uk/Signware/Merchandising-Accessories-/_i.html?_fsub=1806276819&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" style="color:#000000">In-Store Displays</a></li>
    <li><a href="http://stores.ebay.co.uk/Signware/Signware-Exlusive-/_i.html?_fsub=1806280119&_sid=1601798509&_trksid=p4634.c0.m322" target="_blank" style="color:#000000">Signware Exclusive</a></li>
    </ul>
</div>

<li>属性将生成项目符号，并且内联块将使li彼此相邻。 <div>属性使文本浮动在中心。