0

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

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

这是我的链接的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

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

4

3 回答 3

0

尝试添加：

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

到<ul>css

和

postion:absolute;

到<li>CSS。

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

于 2012-08-01T16:42:22.557 回答
0

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

如果您在图像上使用“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/

于 2012-08-01T16:44:13.533 回答
0

可以尝试将每个元素包装在 DIV 中并使用浮点数。请原谅内联 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%">

让我知道这是否有帮助！

于 2012-08-01T16:39:17.893 回答