1

这有点奇怪，但在我的表格单元格中，我有一个项目符号点，由于某种奇怪的原因，它会导致文本在单元格的中心对齐，即使我没有包含文本对齐中心或任何类似的东西。老实说，顺便说一下，所有其他表格列不包括项目符号点，但对于包含项目符号点的列，它会导致文本对齐中心，我不知道这是为什么.

我的问题是<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;
}
4

4 回答 4

0

标签是否<ul>会导致文本在表格单元格中默认居中对齐？

不，UL 标签添加了左边距，这可能会导致列表项显示在中心。

是否有一些与标签相矛盾的东西，<ul>因此它将文本与中心对齐？

可能是这种情况。<ul>使用 html/css 检查器检查应用到的样式。

于 2013-01-22T03:44:36.177 回答
0 
The <ul> tag adds left margin, in the table cell.
于 2013-01-22T03:48:07.000 回答
0

ul 标签会自动添加 40px 的左内边距。将填充设置为 0 应该可以解决您的问题。

于 2013-01-22T03:56:46.950 回答
0

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

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

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

于 2013-01-22T09:00:15.323 回答