Html 使用CSS将链接到文本短语的符号放入文档'；s边距_Html_Css_Css Float_Margin_Css Position

Html 使用CSS将链接到文本短语的符号放入文档'；s边距

html css

Html 使用CSS将链接到文本短语的符号放入文档'；s边距,html,css,css-float,margin,css-position,Html,Css,Css Float,Margin,Css Position,我正在寻找CSS中的一种方法，在文档的边距中放置一个符号，以突出显示/指示文档文本体中某些特殊短语的位置。想想编程IDE中常见的文本编辑器，它们在包含错误的行旁边的空白处放置小警告图标如果文档由未包装的单行组成，则很容易做到这一点。然后我可以检查行是否需要符号并手动放置它但是如果我想在一个文档中放置一个拼写错误图标，浏览器会自动断线，这会变得很棘手。然后我就得想办法找出拼写错误最后是在哪一行。通过检查标记拼写错误的包装跨距的y坐标，JS也可能做到这一点，但我正在寻找更优雅的东西是否有一些关

我正在寻找CSS中的一种方法，在文档的边距中放置一个符号，以突出显示/指示文档文本体中某些特殊短语的位置。想想编程IDE中常见的文本编辑器，它们在包含错误的行旁边的空白处放置小警告图标

如果文档由未包装的单行组成，则很容易做到这一点。然后我可以检查行是否需要符号并手动放置它

但是如果我想在一个文档中放置一个拼写错误图标，浏览器会自动断线，这会变得很棘手。然后我就得想办法找出拼写错误最后是在哪一行。通过检查标记拼写错误的包装跨距的y坐标，JS也可能做到这一点，但我正在寻找更优雅的东西

是否有一些关于向左浮动或绝对定位的技巧允许我，例如，将此标记符号放入标记错误的跨距中，并将其放置在文档的左边距，而不是跨距的边界内？

事实上，答案与您描述的完全一样。让跨距包装文本，并在跨距内包含图标元素。然后向左浮动，并在其上设置负边距。例如：

CSS:

标记：

<span class="selected"><span class="icon"></span>this is some text in a span. </span>

这是跨度中的一些文本。

工作示例：

实际上，答案与您描述的完全相同。让跨距包装文本，并在跨距内包含图标元素。然后向左浮动，并在其上设置负边距。例如：

CSS:

标记：

<span class="selected"><span class="icon"></span>this is some text in a span. </span>

这是跨度中的一些文本。

工作示例：

您可以做的是在拼写错误周围加一个强号，在拼写错误之后添加另一个标记（例如span），并将span设置为position:absolute，但不带“top”属性（因为top位置是可变的）。将该跨度置于宽度：100%以便“选择”该行，并在该跨度内添加另一个标记（为方便起见，使用i标记），然后使用它放置图标

p{ line-height:20px; margin:20px;}
strong{ color:red;}
span{ display:block; height:20px; left:0; position:absolute; width:100%;}
i{ background:red; display:block; height:12px; left:0; position:absolute;
top:-16px; width:12px;}

例如：

尝试更改“结果”窗口的宽度，并查看其行为

这不是一个完美的解决方案，我宁愿使用JS来解决这个问题。

你可以做的是在拼写错误周围加一个强号，在拼写错误之后添加另一个标记（例如span），然后将span设置为position:absolute，但不带“top”属性（因为top位置是可变的）。将该跨度置于宽度：100%以便“选择”该行，并在该跨度内添加另一个标记（为方便起见，使用i标记），然后使用它放置图标

p{ line-height:20px; margin:20px;}
strong{ color:red;}
span{ display:block; height:20px; left:0; position:absolute; width:100%;}
i{ background:red; display:block; height:12px; left:0; position:absolute;
top:-16px; width:12px;}

例如：

尝试更改“结果”窗口的宽度，并查看其行为

这不是一个完美的解决方案，我宁愿使用JS来解决这个问题。

我认为在

：before

伪元素的上下文中也有一个应用程序用于

位置：absolute

。试试这个，看看它是否能满足您的需求：

<html>
<head>
<title>Lorem Ipsum</title>
<style>
.allowLeftMargin
    {
        margin-left: 5em;
    }
.highlightThis
    {
        background-color: yellow;
    }
.highlightThis:before
    {
        background-color: yellow;
        content: "Note";
        padding-left: 0.25em;
        padding-right: 0.25em;
        position: absolute;
        left: 1em;
    }
</style>
</head>
<body>
<div class="allowLeftMargin">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.
    <span class="highlightThis">Excepteur sint occaecat</span>
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
</div>
</body>
</html>


乱数假文
.allowLeftMargin
{
左侧边缘：5em；
}
.highlight这个
{
背景颜色：黄色；
}
.highlightThis:之前
{
背景颜色：黄色；
内容：“注”；
左侧填充：0.25em；
右侧填充：0.25em；
位置：绝对位置；
左：1米；
}
Lorem ipsum dolor sit amet，奉献精英，
劳工和大型企业的临时投资
阿利夸。我们需要一个最低限度的练习
ullamco laboris nisi和aliquip ex ea commodo consequat。
在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人
这是我的女儿。
圣奥凯卡除外
丘比特人不轻率，必须承担责任
莫利特动物是产下的

您可以快速调整浏览器窗口的大小，以确认便笺是否随突出显示的跨度移动。

我认为在

:before

伪元素的上下文中也有一个应用程序用于

位置：absolute

。试试这个，看看它是否能满足您的需求：

<html>
<head>
<title>Lorem Ipsum</title>
<style>
.allowLeftMargin
    {
        margin-left: 5em;
    }
.highlightThis
    {
        background-color: yellow;
    }
.highlightThis:before
    {
        background-color: yellow;
        content: "Note";
        padding-left: 0.25em;
        padding-right: 0.25em;
        position: absolute;
        left: 1em;
    }
</style>
</head>
<body>
<div class="allowLeftMargin">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.
    <span class="highlightThis">Excepteur sint occaecat</span>
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
</div>
</body>
</html>


乱数假文
.allowLeftMargin
{
左侧边缘：5em；
}
.highlight这个
{
背景颜色：黄色；
}
.highlightThis:之前
{
背景颜色：黄色；
内容：“注”；
左侧填充：0.25em；
右侧填充：0.25em；
位置：绝对位置；
左：1米；
}
Lorem ipsum dolor sit amet，奉献精英，
劳工和大型企业的临时投资
阿利夸。我们需要一个最低限度的练习
ullamco laboris nisi和aliquip ex ea commodo consequat。
在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人
这是我的女儿。
圣奥凯卡除外
丘比特人不轻率，必须承担责任
莫利特动物是产下的

您可以快速调整浏览器窗口的大小，以确认便笺是否随突出显示的跨距移动。

您使用的是哪种标记？@DavidThomas不确定我是否理解您的问题。。。我正在使用

！doctype html

。我并不太担心是否将文本块括在span或u或b标记中进行标记。在CSS方面可能也没有太大区别，对吧？我想问的是，你用什么HTML来封装需要在页边空白处放置图标的文本？你所问的可能很简单，但如果你不知道你在做什么，这个问题就太宽泛了，而且无法得到合理的回答（因为我们必须猜测你在做什么，以及你到目前为止得到了什么）。@DavidThomas Christian提供了我一直在寻找的完美答案。也许从那里就很清楚了。那是什么样的加价呢