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 
The <ul> tag adds left margin, in the table cell.
于 2013-01-22T03:48:07.000 に答える
0

ブラウザの一般的なデフォルトにより、ul要素は通常、インデントされて表示されます。これは、さまざまなブラウザーのさまざまな CSS プロパティに依存する可能性があるため、インデントを削除するには、いくつかの CSS 宣言が必要になる場合があります。たとえば、デフォルトの左パディングまたはデフォルトの左マージンが原因でインデントが発生する場合があります。かなり安全なアプローチは次のとおりです (要素の周囲のデフォルトの垂直方向の間隔も削除したい場合):

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

2 番目のルールは、箇条書きのスペースを確保するためのものです。箇条書きはアイテム コンテンツの左側に表示されるliため、ある程度のスペースが必要です。の値は1.3em、バランスの取れた外観を与える傾向があり、箇条書きの左右の間隔がほぼ等しくなります。

于 2013-01-22T09:00:15.323 に答える
0

ul タグは、40px の左パディングを自動的に追加します。パディングを 0 に設定すると、問題が解決するはずです。

于 2013-01-22T03:56:46.950 に答える
0

タグにより、テキストは<ul>デフォルトで表のセル内の中央に配置されますか?

いいえ、UL タグは左余白を追加するため、リスト項目が中央に表示される場合があります。

タグと矛盾している<ul>ため、テキストを中央に揃えているものはありますか?

これはおそらくそうです。<ul>html/css インスペクターを使用して、適用されているスタイルを検査します。

于 2013-01-22T03:44:36.177 に答える