如何在 php 代码中设置列表 <li> 内联样式？

Posted 2023-03-06

【中文标题】如何在 php 代码中设置列表 <li> 内联样式？

【英文标题】：How can I style a list <li> inline in the php code?

【发布时间】：2017-03-30 21:47:41

【问题描述】：

我想水平放置this list。

使用 list-inline，我将列表设置为水平的，但它没有设置 <li> 的样式。然后我想在li 元素上添加一个类，但不知道我可以在代码的哪个位置添加样式。

<ul class="list-inline">
      <?php
        $cat_args['title_li'] = '';
        wp_list_categories(apply_filters('', $cat_args));?>
</ul>

【问题讨论】：

wordpress.stackexchange.com/questions/93627/…

根据文档getbootstrap.com/css/#type-lists，您不应该有这个样式问题。

您好，感谢您的回答。 list-inline 使 ul 水平，但我想在 li 上添加边框，但我不知道如何为 li 添加 css。

【参考方案1】：

你可以使用getbootstrap的grid来横向显示item

http://getbootstrap.com/css/#grid

或者你可以尝试使用 form-inline 来水平显示项目

http://getbootstrap.com/css/#forms-inline

希望对你有帮助

【参考方案2】：

您可以使用 Flexbox 在 CSS 中设置样式。无需使用.list-inline。

看看下面的代码：

ul 
  display: flex;


ul li 
  border-radius: 0 !important;
  border-right: none !important;


ul li:last-child 
  border-right: 1px solid #ddd !important;


body 
  padding: 20px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

希望这会有所帮助！

【讨论】：

您好，谢谢您的回答。这正是我正在尝试的，但我看不到在哪里可以在 php 代码中添加 li 元素的样式：