如何在一行中将链接保存在表格中？

Question

好吧，在我的表格单元格中，我左边有一个图像，我想要顶部对齐的链接，然后是下面的一个小描述。

现在我的图像在左侧，链接顶部对齐。我的问题是链接文本在图像下面移动，而不是停留在图像的右侧并切断单元格的宽度。

这是我的css链接。设置宽度什么都不做。我已经尝试将显示设置为阻止，但随后将链接置于图像下方。我对html很新，因此无知。

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

编辑1：

感谢您的所有建议。我打算今晚试试这个。另外，感谢您仔细检查我是否真的需要一张桌子。我想的越多，我真的不需要一个表格来设置每个列表项目。使用列表更有意义。

编辑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

要尝试的东西可能是将每个元素包装在DIV中并使用float。请原谅内联CSS。

<td style="width: 15%">
    <div style="float: Left">
        <img alt="" src="Image.png" />
        <a href="" class="jobLink">Hello!</a>
    </div>
    <div style="float: Right">
        <p>Hey This is something.</p>
    </div>
</td>

然后，您可以使用表格单元格上的宽度将它们靠近在一起

<td style="width: 15%">

如果有帮助，请告诉我！

Answer 2

尝试添加：

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

到<ul> css

和

postion:absolute;

到<li> css。

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

的<ul>

Answer 3

虽然我不建议使用表格，除非这是真正的表格内容，但以下解决方案应适用于任何容器元素，包括表格单元格。

如果在图像上使用'float：left'的css规则，图像显然会浮动到其容器的左侧。这将确保图像停止推送内容，并且内容将只是环绕图像。

在这种情况下，这意味着图像将自己定位在左侧，链接和描述性文本将紧挨着右侧。

我假设你的表格单元格中的HTML是以下几行：

<img src="http://www.heliam.net/Gein/_Media/apple_icon.png">
<a href="#">Here is a link</a>
<p>And here is some descriptive text</p>

现在，如果是这种情况，那么您的CSS应该只是确保图像浮动到左侧：

img {
  float: left;
}

您可以在此处查看所有这些内容：http://jsfiddle.net/aySEe/