由< br>分隔的链接的悬挂缩进 [英] Hanging indents for links separated by <br>

问题描述

也许这里有一个简单的伎俩，我没有发现它......是否有一个

的CSS大师在这里可以提供帮助？


有问题的页面有一个多列表，其中包含每个

列中的链接列表。因为链接在每一列中单独添加和删除，所以每个链接使用一个单独的表行会非常尴尬。

因此，在每列中链接都是由< br>分隔标签。但是，

长链接描述的自动换行使它们显示为两个或多个单独的链接。这使得很难找到适当的

链接。一个自然的解决方案是使用悬挂缩进，这样每个实际链接的第一行

就会向左伸出。


我以为我可以使用左侧

边距和CSS中的负文本缩进的常用悬挂缩进技巧来做到这一点，尽管它看起来有点像

这样做对于一个标签。然而，实际发生的事情是每个TD中的第一个A标签做了正确的事情，但后来的A标签忽略它。

好​​像我可以''是否将左缩进与每个A标签分别关联？


因为这是一个内部网页，我不能直接链接到它，但这是一个

（已消毒）版本的一栏中的链接。


< TD valign =" top">

< DL>

< DT>类别1说明

< DD>链接

< DT>类别2说明

< DD> ;< A href =" http：//server1.com/link1">第一个链接描述< / A>< BR>

< A href =" http：// server2.com/link2">2nd链接说明< / A>

< DT> Category3说明

< DD>< A href =" http： //server3.com/link3">3rd链接说明< / A>

< DT> Category4说明

< DD>< A href =" ; http：//server4.com/link4">第4个链接描述< / A>

< DT> Category5说明

< DD>链接

< / DL>

< / TD>


以下是失败的CSS片段：

< STYLE type =" text / css">

<！ -

A {

text -indent：-1pc;

left：1pc;

}

- >

< / STYLE>


建议或解释将不胜感激......但是，现在我已经把它写出来了，我怀疑真正的问题可能是因为在DL的范围内进行这种操作，你不可能获得
。


可能有一个完全不同的更好的方法吗？

Maybe there is a simple trick here, and I''m not spotting it... Is there a
guru of CSS hanging around here who can help out?

The page in question has a multi-column table with a list of links in each
column. Because links are added and deleted separately in each column, it
would be exceedingly awkward to use a separate table row for each link.
Therefore, within each column the links are separated by <br> tags. However,
the automatic line wrap for long link descriptions causes them to appear to
be two or more separate links. This makes it hard to pick out the proper
links. A natural solution would be to use a hanging indent so that the first
line of each actual link will stick out to the left.

I thought I could do that with the usual hanging indent trick of a left
margin and a negative text indent in the CSS, though it seems to be a bit
unusual to do it to the A tag. However, what actually happens is that the
first A tags in each TD do the right thing, but the later A tags ignore it.
It seems like I can''t associate the left indent with each A tag separately?

Because this is an intranet page, I can''t link directly to it, but this is a
(sanitized) version of the links in one column.

<TD valign="top">
<DL>
<DT>Category1 Description
<DD>links
<DT>Category2 Description
<DD><A href="http://server1.com/link1">1st link description</A><BR>
<A href="http://server2.com/link2">2nd link description</A>
<DT>Category3 Description
<DD><A href="http://server3.com/link3">3rd link description</A>
<DT>Category4 Description
<DD><A href="http://server4.com/link4">4th link description</A>
<DT>Category5 Description
<DD>links
</DL>
</TD>

Here is the CSS snippet that fails:

<STYLE type="text/css">
<!--
A{
text-indent : -1pc;
left : 1pc;
}
-->
</STYLE>

Suggestions or explanations will be greatly appreciated... However, now that
I''ve written it out, I suspect the real problem may be that you can''t get
away with that kind of manipulation within the scope of a DL.

There''s probably a completely different and much better way to do it?

推荐答案

" Shannon Jacobs" < SH **** @ cashette.com>写道：

"Shannon Jacobs" <sh****@cashette.com> wrote:

left：1pc;

left : 1pc;

我不知道你要做什么，因为你''我们特别难以找到，但这可能有所帮助：
http://www.w3.org/TR/CSS21/visuren.html#position-props

支付特别注意适用于信息。


如果您需要进一步的帮助，请上传一个示例（如果需要

，请替换数据）。


-

Spartanicus

I''ve no idea what you are trying to do as you''ve made it particularly
difficult for us to find out, but this may help:
http://www.w3.org/TR/CSS21/visuren.html#position-props
Pay particular attention to the "Applies to" information.

Upload an example if you want further help (substitute the data if
needed).

--
Spartanicus

Shannon Jacobs写道：

Shannon Jacobs wrote:

有问题的页面有多个列表，其中包含每个
列中的链接列表。由于链接在每列中单独添加和删除，因此为每个链接使用单独的表行非常不方便。
因此，在每列中，链接由< br>分隔。标签。但是，长链接描述的自动换行使它们看起来像是两个或多个单独的链接。这使得很难找出正确的链接。一个自然的解决方案是使用悬挂缩进，以便每个实际链接的第一行将向左伸出。

我以为我可以用通常的悬挂缩进技巧做到这一点在CSS中有一个左边缘和一个负文本缩进，尽管对A标签来说似乎有点不同寻常。然而，实际发生的是每个TD中的第一个A标签做正确的事情，但后来的A标签忽略它。
似乎我不能将左缩进与每个A关联起来。单独标记？

因为这是一个内部网页面，我无法直接链接到它，但这是一列中链接的
（已消毒）版本。


[剪辑代码]

以下是失败的CSS片段：

< STYLE type =" text / css" ;>
<！ -
A {
text-indent：-1pc;
left：1pc;
}
- >
< / STYLE>


甚至在我尝试之前该片段就失败了：

<！ - - >是用于备注，而不是用于样式规则。

什么是个电脑？

什么是''左''应该做什么？


如果你不能显示真实的页面，为什么你不上传一个工作的

例子给某个服务器？

没有看到其余的CSS很难猜到

正在发生什么。


建议或解释将不胜感激...但是，现在，

在DL中可以进行大量操作。

可能有一种完全不同且更好的方法吗？

The page in question has a multi-column table with a list of links in each
column. Because links are added and deleted separately in each column, it
would be exceedingly awkward to use a separate table row for each link.
Therefore, within each column the links are separated by <br> tags. However,
the automatic line wrap for long link descriptions causes them to appear to
be two or more separate links. This makes it hard to pick out the proper
links. A natural solution would be to use a hanging indent so that the first
line of each actual link will stick out to the left.

I thought I could do that with the usual hanging indent trick of a left
margin and a negative text indent in the CSS, though it seems to be a bit
unusual to do it to the A tag. However, what actually happens is that the
first A tags in each TD do the right thing, but the later A tags ignore it.
It seems like I can''t associate the left indent with each A tag separately?

Because this is an intranet page, I can''t link directly to it, but this is a
(sanitized) version of the links in one column.
[snip code]
Here is the CSS snippet that fails:

<STYLE type="text/css">
<!--
A{
text-indent : -1pc;
left : 1pc;
}
-->
</STYLE>
That snippet fails even before I try it out:
<!-- --> is for remarks, not for style rules.
What is a pc?
And what is ''left'' supposed to do?

If you can''t show the real page, why don''t you upload a working
example to some server somewhere?
Without seeing the rest of the CSS it''s difficult to guess what is
happening.

Suggestions or explanations will be greatly appreciated... However, now that
I''ve written it out, I suspect the real problem may be that you can''t get
away with that kind of manipulation within the scope of a DL.
A lot of manipulation is possible within a DL.
There''s probably a completely different and much better way to do it?

有不需要包装的链接描述吗？ ;-)


-

Els http://locusmeus.com/

Sonhos vem。 Sonhos v？o。 Orestoébritfeito。

- Renato Russo -

现在玩：人类联盟 - 在电动梦中一起

Have link descriptions that don''t need wrapping? ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?o. O resto é imperfeito.
- Renato Russo -
Now playing: Human League - Together in Electric Dreams

Els写道：

Els wrote:

什么是个电脑？

pica< http：//www.w3.org/TR /REC-CSS2/syndata.html#length-units>


-

Johannes Koch

in te domine speravi;非永久性的东西。

（Te Deum，4美分。）

pica <http://www.w3.org/TR/REC-CSS2/syndata.html#length-units>

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

这篇关于由&lt; br&gt;分隔的链接的悬挂缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！