html - <ul> 标签会自动导致表格单元格内居中对齐吗？

Question

这有点奇怪，但在我的表格单元格中我有一个元素符号点，出于某种奇怪的原因它导致文本在单元格的中心对齐，即使我没有包含文本对齐中心或任何类似的东西.老实说，所有其他不包含元素符号点的表格列都正常向左对齐，但对于包含元素符号点的列，它会导致文本居中对齐，我不知道这是为什么.

我的问题是 <ul>标记导致文本在表格单元格内默认居中对齐，或者是否存在某种与 <ul> 相矛盾的内容标记，因此它将文本对齐到中心？

下表(缩减代码):

    <table id="tableqanda" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th width="11%" class="image">Image</th>
    </tr>
    </thead>
    </table>
    <div id="tableqanda_onthefly_container">
    <table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
    <tbody>
        <?php
          foreach ($arrQuestionId as $key=>$question) {
        echo '<tr class="tableqandarow">'.PHP_EOL;
        echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? "&nbsp;" : '<ul class="qandaul"><li>'.htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImageFile[$key]) : $arrImageFile[$key] ) ). '</li></ul></td>' . PHP_EOL;

        echo '</tr>'.PHP_EOL;
        }
?>
    </tbody>
    </table>

下面是包含表格 css 的 css:

.imagetd{
    font-size:75%;  
}


.qandaul{
    list-style-type:square;
}

#tableqanda_onthefly_container
{
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height:500px;
}

#tableqanda_onthefly
{
    width:100%;
    overflow:auto;
    clear:both;
}

#tableqanda_onthefly td
{
    border:1px black solid;
    border-collapse:collapse;
}

#tableqanda, #tableqanda_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
    word-wrap:break-word;
}       

#tableqanda{
    width:100%;
    margin-left:0;
    float:left;
}

#tableqanda td { 
    vertical-align: middle;
    border:1px black solid;
    border-collapse:collapse;
}

#tableqanda th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

.tableqandarow{
    border:1px black solid;
    border-collapse:collapse;
}

Answer 1

由于浏览器的常见默认设置，ul 元素通常显示为缩进。这可能取决于不同浏览器中的不同 CSS 属性，因此您可能需要多个 CSS 声明来删除缩进。例如，缩进可能是由于默认的左填充或由于默认的左边距而发生的。以下是一种相当安全的方法(假设您也希望删除元素周围的默认垂直间距):

ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }

第二条规则是为列表元素符号保留空间。元素符号出现在 li 项内容的左侧，因此它需要一些空间。 1.3em 的值倾向于提供平衡的外观，元素符号左右两侧的间距大致相等。