我对此非常陌生并一直试图弄清楚这一点，无论我读过多少篇文章，我似乎仍然无法弄清楚如何获得这个工作。
我想列出这个列出的信息，其中4位在顶部，3位在底部，我相信我可以使用列。我已经阅读了两种不同的方法来做到这一点。
第一种方法是我可以将它们全部放在同一行，但似乎无法将最后3个列表放到第二行。我认为插入一个标签会起作用，但它没有。
顺便提一句，这是在一个tab元素中的wordpress。 截图 - [TestTab] [1]
<table cellpadding="0">
<tbody>
<tr>
<td width="335">
<strong>Brunch/Lunch/Cafes:</strong><br>
<a href="http://www.ouioui.com.ar/" target="_blank">1. Oui Oui</a><br>
<a href="http://www.mooirestaurant.com.ar/" target="_blank">2. Möoi</a><br>
<a href="http://www.brandonrestaurant.com/" target="_blank">3. Brandon</a><br>
<a href="http://pani.com.ar/" target="_blank">4. Pani</a><br>
<a href="http://www.lapanerarosa.com.ar/" target="_blank">5. La Panera Rosa</a><br>
</td>
<td width="335">
<strong>Quick Eats:</strong><br>
<a href="https://www.yelp.com/biz/fitz-roll-buenos-aires" target="_blank">1. Fitz Roll</a><br>
<a href="http://perez-h.com/" target="_blank">2. Perez H</a><br>
<a href="http://www.lafabricadeltaco.com/" target="_blank">3. La Fábrica del Taco</a><br>
<a href="http://www.romario.com.ar/" target="_blank">4. Romario</a><br>
<a href="https://www.facebook.com/JuiceUpBaires/" target="_blank">5. Juice Up</a><br>
</td>
<td width="335">
<strong>Dinner:</strong><br>
<a href="https://www.yelp.com/biz/sarkis-buenos-aires-2" target="_blank">1. Sarkis</a><br>
<a href="http://lacabrera.com.ar/" target="_blank">2. La Cabrera</a><br>
<a href="http://www.osaka.com.pe/" target="_blank">3. Osaka</a><br>
<a href="http://www.sipanrestaurants.com/" target="_blank">4. Sipan</a><br>
<a href="http://www.properbsas.com.ar/" target="_blank">5. Proper</a><br>
<a href="http://www.tacobox.com.ar/" target="_blank">6. Taco Box</a><br>
</td>
<td width="335">
<strong>Bars/Clubs:</strong><br>
<a href="http://rosebar.com.ar/" target="_blank">1. RoseBar</a><br>
<a href="http://nicetoclub.com/" target="_blank">2. Niceto Club</a><br>
<a href="https://www.facebook.com/SheldonPub" target="_blank">3. Bar Sheldon</a><br>
<a href="http://www.isabelbar.com/" target="_blank">4. Bar Isabel</a><br>
<a href="https://www.facebook.com/M-Salumer%C3%ADa-Enoteca-Bar-de-Vini-Almacen-846143498743275/" target="_blank">5. M Salumeria</a><br>
</td>
<td width="335">
<strong> Closed Door/Speakeasy Bars:</strong><br>
<a href="http://victoriabrownbar.com/" target="_blank">1. Victoria Brown</a><br>
<a href="http://www.bradleyltdbar.com/" target="_blank">2. Bradley Bar</a><br>
<a href="http://www.floreriaatlantico.com.ar/" target="_blank">3. Florería Atlántico</a><br>
<a href="http://www.nicky-harrison.com/" target="_blank">4. Nicky Harrison</a> <font size=2>(Must have dinner reservation first at Nicky NY Sushi)</font><br>
<a href="http://www.878bar.com.ar/" target="_blank">5. Bar 878</a><br>
<a href="http://vernecocktailclub.com/" target="_blank">6. Verne Club</a><br>
</td>
<td width="335">
<strong>Fitness:</strong><br>
<a href="http://www.alwaysgym.com.ar/" target="_blank">1. Always Club</a><br>
<a href="http://sparringcenter.com.ar/" target="_blank">2. Sparring Center</a><br>
<a href="https://www.rockcycle.com.ar/" target="_blank">3. RockCycle</a><br>
<a href="http://www.buenaondayoga.net/" target="_blank">4. Buena Onda Yoga</a><br>
<a href="http://www.omniafc.com.ar/" target="_blank">5. Omni Gym</a><br>
</td>
<td width="335">
<strong>Shopping:</strong><br>
<a href="http://www.distritoarcos.com/" target="_blank">1. Distrito Arcos</a><br>
<a href="http://elsolarshopping.com.ar/" target="_blank">2. El Solar Shopping</a><br>
<a href="http://www.editormarket.com.ar/" target="_blank">3. Editor Market</a><br>
<a href="https://www.google.com.ar/maps/place/Mercado+de+San+Telmo/@-34.619431,-58.3727404,15z/data=!4m5!3m4!1s0x0:0x214afd0cc89733cf!8m2!3d-34.619431!4d-58.3727404" target="_blank">4. San Telmo Market</a> <font size="2">(Only Sundays)</font><br>
<a href="http://www.calmachicha.com/shop/en/" target="_blank">5. Calma Chica</a><br>
</td>
</tr>
</tbody>
</table>
我还找到了第二种方法，我现在有点能够获得2行，但是它们都偏离中心，并且还有一个奇怪的盒子顶部切割掉了。 Screenshot- [Test2的] [2]
<div style="width:24%;padding:0 10px 0 0;float:left;">
<strong>Brunch/Lunch/Cafes:</strong><br>
<a href="http://www.ouioui.com.ar/" target="_blank">1. Oui Oui</a><br>
<a href="http://www.mooirestaurant.com.ar/" target="_blank">2. Möoi</a><br>
<a href="http://www.brandonrestaurant.com/" target="_blank">3. Brandon</a><br>
<a href="http://pani.com.ar/" target="_blank">4. Pani</a><br>
<a href="http://www.lapanerarosa.com.ar/" target="_blank">5. La Panera Rosa</a></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
<strong>Quick Eats:</strong><br>
<a href="https://www.yelp.com/biz/fitz-roll-buenos-aires" target="_blank">1. Fitz Roll</a><br>
<a href="http://perez-h.com/" target="_blank">2. Perez H</a><br>
<a href="http://www.lafabricadeltaco.com/" target="_blank">3. La Fábrica del Taco</a><br>
<a href="http://www.romario.com.ar/" target="_blank">4. Romario</a><br>
<a href="https://www.facebook.com/JuiceUpBaires/" target="_blank">5. Juice Up</a><br></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
<strong>Dinner:</strong><br>
<a href="https://www.yelp.com/biz/sarkis-buenos-aires-2" target="_blank">1. Sarkis</a><br>
<a href="http://lacabrera.com.ar/" target="_blank">2. La Cabrera</a><br>
<a href="http://www.osaka.com.pe/" target="_blank">3. Osaka</a><br>
<a href="http://www.sipanrestaurants.com/" target="_blank">4. Sipan</a><br>
<a href="http://www.properbsas.com.ar/" target="_blank">5. Proper</a><br>
<a href="http://www.tacobox.com.ar/" target="_blank">6. Taco Box</a><br></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
<br>
<strong>Bars/Clubs:</strong><br>
<a href="http://rosebar.com.ar/" target="_blank">1. RoseBar</a><br>
<a href="http://nicetoclub.com/" target="_blank">2. Niceto Club</a><br>
<a href="https://www.facebook.com/SheldonPub" target="_blank">3. Bar Sheldon</a><br>
<a href="http://www.isabelbar.com/" target="_blank">4. Bar Isabel</a><br>
<a href="https://www.facebook.com/M-Salumer%C3%ADa-Enoteca-Bar-de-Vini-Almacen-846143498743275/" target="_blank">5. M Salumeria</a></div>
<div style="width:25%;padding:0 10px 0 0;float:left;">
<strong> Closed Door/Speakeasy Bars:</strong><br>
<a href="http://victoriabrownbar.com/" target="_blank">1. Victoria Brown</a><br>
<a href="http://www.bradleyltdbar.com/" target="_blank">2. Bradley Bar</a><br>
<a href="http://www.floreriaatlantico.com.ar/" target="_blank">3. Florería Atlántico</a><br>
<a href="http://www.nicky-harrison.com/" target="_blank">4. Nicky Harrison</a> <font size=2>(Must have dinner reservation first at Nicky NY Sushi)</font><br>
<a href="http://www.878bar.com.ar/" target="_blank">5. Bar 878</a><br>
<a href="http://vernecocktailclub.com/" target="_blank">6. Verne Club</a></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
<strong>Fitness:</strong><br>
<a href="http://www.alwaysgym.com.ar/" target="_blank">1. Always Club</a><br>
<a href="http://sparringcenter.com.ar/" target="_blank">2. Sparring Center</a><br>
<a href="https://www.rockcycle.com.ar/" target="_blank">3. RockCycle</a><br>
<a href="http://www.buenaondayoga.net/" target="_blank">4. Buena Onda Yoga</a><br>
<a href="http://www.omniafc.com.ar/" target="_blank">5. Omni Gym</a></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
<strong>Shopping:</strong><br>
<a href="http://www.distritoarcos.com/" target="_blank">1. Distrito Arcos</a><br>
<a href="http://elsolarshopping.com.ar/" target="_blank">2. El Solar Shopping</a><br>
<a href="http://www.editormarket.com.ar/" target="_blank">3. Editor Market</a><br>
<a href="https://www.google.com.ar/maps/place/Mercado+de+San+Telmo/@-34.619431,-58.3727404,15z/data=!4m5!3m4!1s0x0:0x214afd0cc89733cf!8m2!3d-34.619431!4d-58.3727404" target="_blank">4. San Telmo Market</a> <font size="2">(Only Sundays)</font><br>
<a href="http://www.calmachicha.com/shop/en/" target="_blank">5. Calma Chica</a></div>
<div style=”clear:both;”></div>
非常感谢任何帮助，谢谢！
答案 0 :(得分：1)
似乎woffice使用bootstrap的网格系统。要创建列，并正确地“清除”它们，您可以利用以下类：
GridLayoutManager作为包装器，当它们换行到多行时，这将形成列之间的“中断”，并且可以用于确保后续列从左侧重新开始。
Bootstrap使用12列网格，因此将12除以您希望使用的列数，并相应地更改.row值。你会注意到我使用了.col-md-XX和.col-xs-6，它利用了引导程序提供的响应式网格系统，分别在2 .col-md-3和4 (12 / 6 = 2)列之间切换。 / p>
<强> HTML
(12 / 3 = 4) PS。根据我的评论，如果您有权访问主题文件，为了自定义它们，您应该（尽可能）尽量避免使用内联样式，而是将它们附加到主题<div class="row">
<div class="col-xs-6 col-md-3">
<strong>Brunch/Lunch/Cafes:</strong>
<ol>
<li><a href="http://www.ouioui.com.ar/" target="_blank">Oui Oui</a></li>
<li><a href="http://www.mooirestaurant.com.ar/" target="_blank">Möoi</a></li>
<li><a href="http://www.brandonrestaurant.com/" target="_blank">Brandon</a></li>
<li><a href="http://pani.com.ar/" target="_blank">Pani</a></li>
<li><a href="http://www.lapanerarosa.com.ar/" target="_blank">La Panera Rosa</a></li></ol>
</ol>
</div>
<div class="col-xs-6 col-md-3">
<strong>Quick Eats:</strong>
<ol>
<li><a href="https://www.yelp.com/biz/fitz-roll-buenos-aires" target="_blank">Fitz Roll</a></li>
<li><a href="http://perez-h.com/" target="_blank">Perez H</a></li>
<li><a href="http://www.lafabricadeltaco.com/" target="_blank">La Fábrica del Taco</a></li>
<li><a href="http://www.romario.com.ar/" target="_blank">Romario</a></li>
<li><a href="https://www.facebook.com/JuiceUpBaires/" target="_blank">Juice Up</a></li></ol>
</ol>
</div>
<div class="col-xs-6 col-md-3">
<strong>Dinner:</strong>
<ol>
<li><a href="https://www.yelp.com/biz/sarkis-buenos-aires-2" target="_blank">Sarkis</a></li>
<li><a href="http://lacabrera.com.ar/" target="_blank">La Cabrera</a></li>
<li><a href="http://www.osaka.com.pe/" target="_blank">Osaka</a></li>
<li><a href="http://www.sipanrestaurants.com/" target="_blank">Sipan</a></li>
<li><a href="http://www.properbsas.com.ar/" target="_blank">Proper</a></li>
<li><a href="http://www.tacobox.com.ar/" target="_blank">Taco Box</a></li></ol>
</ol>
</div>
<div class="col-xs-6 col-md-3">
<strong>Bars/Clubs:</strong>
<ol>
<li><a href="http://rosebar.com.ar/" target="_blank">RoseBar</a></li>
<li><a href="http://nicetoclub.com/" target="_blank">Niceto Club</a></li>
<li><a href="https://www.facebook.com/SheldonPub" target="_blank">Bar Sheldon</a></li>
<li><a href="http://www.isabelbar.com/" target="_blank">Bar Isabel</a></li>
<li><a href="https://www.facebook.com/M-Salumer%C3%ADa-Enoteca-Bar-de-Vini-Almacen-846143498743275/" target="_blank">M Salumeria</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<strong> Closed Door/Speakeasy Bars:</strong>
<ol>
<li><a href="http://victoriabrownbar.com/" target="_blank">Victoria Brown</a></li>
<li><a href="http://www.bradleyltdbar.com/" target="_blank">Bradley Bar</a></li>
<li><a href="http://www.floreriaatlantico.com.ar/" target="_blank">Florería Atlántico</a></li>
<li><a href="http://www.nicky-harrison.com/" target="_blank">Nicky Harrison</a> <small>(Must have dinner reservation first at Nicky NY Sushi)</small></li>
<li><a href="http://www.878bar.com.ar/" target="_blank">Bar 878</a></li>
<li><a href="http://vernecocktailclub.com/" target="_blank">Verne Club</a></li></ol>
</ol>
</div>
<div class="col-xs-6 col-md-3">
<strong>Fitness:</strong>
<ol>
<li><a href="http://www.alwaysgym.com.ar/" target="_blank">Always Club</a></li>
<li><a href="http://sparringcenter.com.ar/" target="_blank">Sparring Center</a></li>
<li><a href="https://www.rockcycle.com.ar/" target="_blank">RockCycle</a></li>
<li><a href="http://www.buenaondayoga.net/" target="_blank">Buena Onda Yoga</a></li>
<li><a href="http://www.omniafc.com.ar/" target="_blank">Omni Gym</a></li></ol>
</ol>
</div>
<div class="col-xs-6 col-md-3">
<strong>Shopping:</strong>
<ol>
<li><a href="http://www.distritoarcos.com/" target="_blank">Distrito Arcos</a></li>
<li><a href="http://elsolarshopping.com.ar/" target="_blank">El Solar Shopping</a></li>
<li><a href="http://www.editormarket.com.ar/" target="_blank">Editor Market</a></li>
<li><a href="https://www.google.com.ar/maps/place/Mercado+de+San+Telmo/@-34.619431,-58.3727404,15z/data=!4m5!3m4!1s0x0:0x214afd0cc89733cf!8m2!3d-34.619431!4d-58.3727404" target="_blank">San Telmo Market</a> <small>(Only Sundays)</small></li>
<li><a href="http://www.calmachicha.com/shop/en/" target="_blank">Calma Chica</a></li>
</ol>
</div>
</div>
文件中。这通常可以通过wordpress仪表板中的styles.css进行访问。
答案 1 :(得分：0)
这应该可以满足您的需求。使用floated-div和ol / li标签是您正在尝试完成的正确模式。您可以继续添加更多类别块，它们将继续表现相同。每个类别div将填充其内部容器宽度的25％，在四个类别之后，第五个将落入另一行。您可以通过将23%值更改为18%（5），13%（6）等来进行调整。
<style>
.category{
float: left;
width: 23%;
margin: 1%;
padding: 0;
min-height: 175px;
max-height: 300px;
}
.category>ol{
margin-left: 20px;
padding: 0;
}
</style>
<div class="category">
<strong>Brunch/Lunch/Cafes:</strong>
<ol>
<li><a href="http://www.ouioui.com.ar/" target="_blank">Oui Oui</a></li>
<li><a href="http://www.mooirestaurant.com.ar/" target="_blank">Möoi</a></li>
<li><a href="http://www.brandonrestaurant.com/" target="_blank">Brandon</a></li>
<li><a href="http://pani.com.ar/" target="_blank">Pani</a></li>
<li><a href="http://www.lapanerarosa.com.ar/" target="_blank">La Panera Rosa</a></li></ol>
</ol>
</div>
<div class="category">
<strong>Quick Eats:</strong>
<ol>
<li><a href="https://www.yelp.com/biz/fitz-roll-buenos-aires" target="_blank">Fitz Roll</a></li>
<li><a href="http://perez-h.com/" target="_blank">Perez H</a></li>
<li><a href="http://www.lafabricadeltaco.com/" target="_blank">La Fábrica del Taco</a></li>
<li><a href="http://www.romario.com.ar/" target="_blank">Romario</a></li>
<li><a href="https://www.facebook.com/JuiceUpBaires/" target="_blank">Juice Up</a></li></ol>
</ol>
</div>
<div class="category">
<strong>Dinner:</strong>
<ol>
<li><a href="https://www.yelp.com/biz/sarkis-buenos-aires-2" target="_blank">Sarkis</a></li>
<li><a href="http://lacabrera.com.ar/" target="_blank">La Cabrera</a></li>
<li><a href="http://www.osaka.com.pe/" target="_blank">Osaka</a></li>
<li><a href="http://www.sipanrestaurants.com/" target="_blank">Sipan</a></li>
<li><a href="http://www.properbsas.com.ar/" target="_blank">Proper</a></li>
<li><a href="http://www.tacobox.com.ar/" target="_blank">Taco Box</a></li></ol>
</ol>
</div>
<div class="category">
<strong>Bars/Clubs:</strong>
<ol>
<li><a href="http://rosebar.com.ar/" target="_blank">RoseBar</a></li>
<li><a href="http://nicetoclub.com/" target="_blank">Niceto Club</a></li>
<li><a href="https://www.facebook.com/SheldonPub" target="_blank">Bar Sheldon</a></li>
<li><a href="http://www.isabelbar.com/" target="_blank">Bar Isabel</a></li>
<li><a href="https://www.facebook.com/M-Salumer%C3%ADa-Enoteca-Bar-de-Vini-Almacen-846143498743275/" target="_blank">M Salumeria</a></li>
</ol>
</div>
<div class="category">
<strong> Closed Door/Speakeasy Bars:</strong>
<ol>
<li><a href="http://victoriabrownbar.com/" target="_blank">Victoria Brown</a></li>
<li><a href="http://www.bradleyltdbar.com/" target="_blank">Bradley Bar</a></li>
<li><a href="http://www.floreriaatlantico.com.ar/" target="_blank">Florería Atlántico</a></li>
<li><a href="http://www.nicky-harrison.com/" target="_blank">Nicky Harrison</a> <small>(Must have dinner reservation first at Nicky NY Sushi)</small></li>
<li><a href="http://www.878bar.com.ar/" target="_blank">Bar 878</a></li>
<li><a href="http://vernecocktailclub.com/" target="_blank">Verne Club</a></li></ol>
</ol>
</div>
<div class="category">
<strong>Fitness:</strong>
<ol>
<li><a href="http://www.alwaysgym.com.ar/" target="_blank">Always Club</a></li>
<li><a href="http://sparringcenter.com.ar/" target="_blank">Sparring Center</a></li>
<li><a href="https://www.rockcycle.com.ar/" target="_blank">RockCycle</a></li>
<li><a href="http://www.buenaondayoga.net/" target="_blank">Buena Onda Yoga</a></li>
<li><a href="http://www.omniafc.com.ar/" target="_blank">Omni Gym</a></li></ol>
</ol>
</div>
<div class="category">
<strong>Shopping:</strong>
<ol>
<li><a href="http://www.distritoarcos.com/" target="_blank">Distrito Arcos</a></li>
<li><a href="http://elsolarshopping.com.ar/" target="_blank">El Solar Shopping</a></li>
<li><a href="http://www.editormarket.com.ar/" target="_blank">Editor Market</a></li>
<li><a href="https://www.google.com.ar/maps/place/Mercado+de+San+Telmo/@-34.619431,-58.3727404,15z/data=!4m5!3m4!1s0x0:0x214afd0cc89733cf!8m2!3d-34.619431!4d-58.3727404" target="_blank">San Telmo Market</a> <small>(Only Sundays)</small></li>
<li><a href="http://www.calmachicha.com/shop/en/" target="_blank">Calma Chica</a></li>
</ol>
</div>