我在为我正在制作的网站设计CSS时遇到问题。它类似于这张图中所示的那个:
如何使用当用户选择并阻止文本时,左右区域也不会被选中?在我的情况下,我尝试将包含标记的文本(和<article>
标记)包含在<div>
中,但我没有看到任何更改。
答案 0 :(得分:2)
我知道这已经很老了,但我想我会发出声音,万一我的解决方案可以帮助未来的任何人。
我遇到了同样的问题,其中文本选择包括div
元素内的填充。我试过@Joseph Marikle的解决方案;但是,我有浮动的其他元素浮动解决方案存在问题,并且使用绝对定位不是一种选择。
然后我尝试了从页面流中删除元素(我的案例中为p
元素)的方法。我登陆SO question并决定在我的p
元素上尝试相对定位,它似乎产生了预期的效果。
这是展示结果的CodePen。第二个p
元素应用了相对定位,文本选择受到约束。
答案 1 :(得分:1)
mgunadi,欢迎来到SO
这里发生的事情是你有一个中心方法留下余量。当您在浏览器中突出显示文本时,它还会选择边距。通过更改内容中心的方式,可以在一定程度上修复此问题。例如,如果您使用position:absolute
解决方案,则不需要此边距,并且不会在突出显示时选择此边距。 (演示:http://jsfiddle.net/FX45g/)。不幸的是,如果这不是一个选项,你必须使用保证金来集中内容,那么这是一个浏览器问题,完全取决于特定浏览器如何处理它。
以定位为中心内容内容必须具有固定宽度(对于此示例为300px)。那么你可以应用以下规则:
.centered
{
position:absolute;
left:50%;
margin-left:-150px;
}
找到另一种方式。 :P一个包装! (在漂浮的帮助下)
.wrapper{margin:0 auto; width:300px;}
.wrapper>div {float:left;}
答案 2 :(得分:0)
CSS不提供此功能。这是浏览器本身的功能。