Question

我正在创建在线测试应用程序我的问题是如果选项的长度不同意味着对齐不正确。例如

1.测试问题？

a）.op12 b）.op234

c）.op145 d）.op345

在这里你可以看到b）和d）没有正确对齐我知道这是一个简单的问题，但我陷入了这个问题。我可以使用css或其他任何东西。

mycode是

<div style='padding-left:1em'>a).op12 b).op234</div><br/>
<div style='padding-left:1em'>c).op145 d).op345</div>

如果我为每个选项使用单独的标记意味着它显示为

 a)op12
  b)op234
   c)op145
   d)op345

任何人都可以给我解决这个问题的想法

提前致谢

Answer 1

我认为您应该使用Table代替div

Question
<table width="300px" cellpadding="5" cellspacing="5">
    <tr>
        <td>a).op12</td><td>b).op234</td>
    </tr>
    <tr>
        <td>a).op12</td><td>b).op234</td>
    </tr>
</table>

DEMO

Answer 2

诀窍是为所有选项使用相同宽度的包装div。

使用此代码

<div class="opt-row"><span>a).op12</span> <span>b).op234</span></div>
<div class="opt-row"><span>c).op145</span> <span>d).op345</span></div>

＆安培; CSS：

.opt-row{padding-left:1em;}
.opt-row span{display:inline-block; width:100px;} /*Change this with accordingy */

这是DEMO

Answer 3

我认为您应该在这种情况下使用<ul>，<li>可以根据您的目的使用css轻松管理。

这是一个例子：JSFiddle

我希望这会对你有所帮助

Answer 4

作为Manwal'w建议的补充：如果需要列表，请使用列表。 Div毫无意义。
在使用HTML时 - HTML是内容，css用于设计，js用于行为。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bla!</title>
        <style type='text/css'>
            li { min-width:10em; list-style-type: lower-alpha;}
            li.odd { float:left; }
        </style>
    </head>
    <body>
        <ol>
            <li class='odd'>op12</li>
            <li class='even'>op234</li>
            <li class='odd'>op145</li>
            <li class='even'>op345</li>

        </ol>

    </body>
</html>

如何给两个元素提供相等的空间？

4 个答案: