Question

我需要为jumbotron div类中的unorder列表设置小字体大小。我尝试用Css设计它，但没有一个可以工作。

这是需要更小的代码：

HTML：

<div class="jumbotron">
    <h3>Informazioni di debug del servizio deployato:</h3>
    <hr>
    <h4><ul style="list-style-type:disc">
        <li><a href="">ID: {{ processDefinition.id }}</a></li>
        <li><a href=""> Name: {{ processDefinition.name }}</a></li>
        <li><a href="">Deployment ID: {{ processDefinition.deploymentId }}</a></li>
        <li><a href="">Category: {{ processDefinition.category }}</a> </li>
        <li><a href="">URL: {{ processDefinition.url }}</a></li>
    </ul></h4>
    <hr>
</div>

编辑：是的，我知道是一个错误，我忘记删除它，这里只是因为我做了很多编辑，并在发布之前尝试：）

PS：但为什么-2票？

Answer 1

您的错误：

<ul>代码中无法<hX>。
要使list-style-type: disc可见，您需要将margin-left添加到<li>或padding-left添加到<ul>。
要获得较小的尺寸，请使用font-size: 0.75em或类似的东西：

更正后的代码：

＆＃13;

<div class="jumbotron">
  <h3>Informazioni di debug del servizio deployato:</h3>
  <hr>
  <ul style="list-style-type: disc; padding-left: 20px; font-size: 0.75em;">
    <li><a href="">ID: {{ processDefinition.id }}</a></li>
    <li><a href=""> Name: {{ processDefinition.name }}</a></li>
    <li><a href="">Deployment ID: {{ processDefinition.deploymentId }}</a></li>
    <li><a href="">Category: {{ processDefinition.category }}</a> </li>
    <li><a href="">URL: {{ processDefinition.url }}</a></li>
  </ul>
  <hr>
</div>

＆＃13;

Answer 2

我认为问题可能是整个列表<h4>位于标题<h4>中。请尝试单独添加，因为默认列表是根据文本标题ul的大小分配的，并添加ul li { font-size: 12px; }元素的css属性：

{{1}}

Answer 3

我认为你可以这样做：

.jumbotron h3 hr h4 ul li a{
 font-size: 0.1rem
 }

或者在jumbotron上添加一个类来改变font-size：

<div class="jumbotron small-text">
<h3>Informazioni di debug del servizio deployato:</h3>
<hr>
<h4><ul style="list-style-type:disc">
    <li><a href="">ID: {{ processDefinition.id }}</a></li>
    <li><a href=""> Name: {{ processDefinition.name }}</a></li>
    <li><a href="">Deployment ID: {{ processDefinition.deploymentId }}</a></li>
    <li><a href="">Category: {{ processDefinition.category }}</a> </li>
    <li><a href="">URL: {{ processDefinition.url }}</a></li>
</ul></h4>
<hr>

.small-text h3 hr h4 ul li a{
 font-size: 0.1rem
 }

或

.small-text{
 font-size: 0.1rem !important;
 }

如何调整jumbotron类中的元素大小

3 个答案: