Question

我的应用程序显示的列表包含<ul>和<li> in this example。

如何更改样式以使标签不被包裹（如HH Pruebas Funcionales）并且所有数字都已对齐？

Answer 1

如果我可以从您发布的链接中看到html，我可以肯定地说，尝试nowrap属性，它适用于DIV它也可能适用于LI

Answer 2

尝试在li标签上使用 style =＆＃34; white-space：nowrap;＆＃34; 。见下面的例子。

<div style="border:1px solid red;width:25%;margin:0px auto">
  <div style="float:left;width:55%;">
    <ul>
        <li style="style=white-space:nowrap;">HH Preubas Functionales</li>
        <li style="style=white-space:nowrap;">HH Preubas Functionales</li>
        <li style="style=white-space:nowrap;">HH Preubas Functionales</li>
    </ul>
  </div>
  <div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
  </div>
</div>

希望这有帮助。

Answer 3

使用此：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Title</title>

<style type="text/css">
.td{
text-align:right;	
}
table{
color:#999;
font-size:20px;
}
</style>
</head>

<body>

<table>
<tr><td>HH Analisis:</td>
<td class="td">1</td></tr>
<tr><td>HH Core:</td>
<td class="td">2</td></tr>
<tr><td>HH test:</td>
<td class="td">1</td></tr>
<tr><td>HH test:</td>
<td class="td">2</td></tr>
<tr><td>HH test:</td>
<td class="td">1</td></tr>
<tr><td>HH test:</td>
<td class="td">2</td></tr>
<tr><td>HH test:</td>
<td class="td">1</td></tr>
<tr><td>HH test:</td>
<td class="td">2</td></tr>
<tr><td>HH test:</td>
<td class="td">2</td></tr>
<tr><td>HH test:</td>
<td class="td">1</td></tr>
<tr><td>HH test:</td>
<td class="td">2</td></tr>
<tr><td>HH test:</td>
<td class="td">1</td></tr>
<tr><td>HH Total:</td>
<td class="td">19</td></tr>
</table>

</body>

</html>

＆＃13;

祝你好运！

Answer 4

使用两个ul＆amp;给他们display:inline-block

＆＃13;

ul {
  display: inline-block;
  vertical-align: top;
}
ul li {
  list-style: none;
  border-bottom: 1px solid #ccc;
}

＆＃13;

<ul class="first">
  <li>one</li>
  <li>two</li>
  <li>Three</li>
  <li>Four</li>
  <li>This is little big!</li>
  <li>smaller one</li>
  <li>small</li>
</ul>
<ul class="second">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

＆＃13;

请检查上面的代码段！

如何显示列表的全宽

4 个答案: