如何使用CSS将文本向左移动？

Question

我在span元素内有一些文本，我想将其左对齐，而不是现在居中。 我尝试使用CSS在右侧和文本中心设置边距，但这没有用。 你能告诉我怎么做吗？ 我要左边的文本是“（（Jag arbetade：4-6 timmar / vecka）”），现在，如果您看我的小提琴，它会居中显示。

我要更改的代码是

<div id="i4c2" class="artBaseRow">
    <div id="i4_tbl_11" class="artWrapper">
        <table class="srtbl" cellpadding="2" cellspacing="0" summary="">
            <caption><b>Vad var det bästa med kursen?</b></caption>
            <tbody>
                <tr class="srtbl-h1">
                    <th class="srtbl-qt">
                        <div>
                            <br /> <span>(Jag arbetade: 4-6 timmar/vecka)</span>
                        </div>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</div>

以便使文本“（Jag arbetade ...”）与标题旁边的左侧对齐。我该怎么做？

Answer 1

它来自哪里...

您已将文本放在表格标题<th>元素中。 应用font-weight: bold; text-align: center;是粗略的浏览器行为font-weight: bold; text-align: center; font-weight: bold; text-align: center; 在所谓的用户代理样式表中的<th> 上 。

...以及如何解决。

您需要指定要覆盖此行为的内容，例如：

th {
    text-align: left;
}

Answer 2

关键是span元素具有display: inline因此其宽度与文本完全相同，并且其某些父级元素具有text-align: center ，使之位于中心，因此仅通过执行text-align: left不起作用，因此您必须将其更改为display: block ，然后将text-align: left

澄清：

span-element{
    display: block;
    text-align: left;
}

您也可以：

span-element{
    display: inline-block;
    width: 100%;
    text-align: left;
}

Answer 3

添加text-align: left; 上这堂课

.reportPage .srtbl .srtbl-h1 th, .reportPage .srtbl .srtbl-h1 td{
    text-align: left;
}

Answer 4

为srtbl-qt类添加此CSS（尝试将其放在CSS文件的末尾）

.srtbl-qt {
    text-align: left;
}

另外我也不知道为什么您需要在该文本周围使用div和break和span元素，但是可以将其删除（ 提示 ： th {padding-top: 10px;} ）