html - 如何让我的链接在我的表中保持在 1 行？

Question

好的，所以在我的表格单元格中，左侧有一个图像，一个我希望顶部对齐的链接，然后是下面的一个小描述。

现在我的图片位于左侧，链接顶部对齐。我的问题是链接文本在图像下方，而不是停留在图像右侧并在单元格宽度处截断。

这是我的链接的 CSS。设置宽度没有任何作用。我曾尝试将显示设置为阻止，但随后将链接置于图像下方。我对 html 很陌生，所以我一无所知。

.jobLink {
    color:black;
    vertical-align:top;
    width:100px;
}

编辑 1:

感谢您的所有建议。今晚我将尝试对此进行测试。另外，感谢您仔细检查我是否真的需要一张 table 。我想得越多，我真的不需要一张表格来设置每个列表项。使用列表更有意义。

编辑 2:

好的，这就是我想要的外观。

根据大家的建议，我已经从表格切换到列表。数据并不是真正的表格。

编辑 3

这是我在列表中使用的更新后的 css。

.jobList {
    background: white;
    color:black;
    width:inherit;
    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-size:10pt;
    font-weight:bold;
    list-style:none;
    float:left;
    padding:0;
    margin:0;
}

.jobList li 
{
    float:left;    
    overflow:hidden;
    width:inherit;
}

.jobList li a
{
    color:Black;
    vertical-align:top;
    white-space:nowrap;
}

.jobList li img
{
    float:left;    
}

编辑4

这是图像，这是有问题的列表项。此外，列表本身有一个包装 div，这可能是关键。我已经添加了那个CSS。

.jobsListWrapper {
    width:318px;
    height:500px;
    overflow:auto;
    float:left;
}

<li>
<div>
<img src="/images/page.png">
<a id="5182" href="/jobs.aspx?rid=1016&amp;jid=5182">MyJobID - This is my long title for the task that I need to complete</a>
</div>
</li>

编辑 5

我刚看到。包装器导致列表项自动溢出......好吧，那么我如何只垂直溢出？好的，不，那不是问题所在。

Answer 1

尝试添加:

position:relative;
display:block;
overflow:hidden;

到<ul> CSS

和

postion:absolute;

到<li> CSS。

原因是如果<ul>是绝对定位的，它从文档流中删除，这反过来意味着 <li>将相对于视口(viewport)定位并忽略 overflow:hidden的 <ul>