使用CSS最小化边框文字的边框

有色边框包围接壤文本
接壤文本的边框最小包围文本
接壤的文本有最大宽度
接壤文字的边框不重叠相邻元素

在呈现时，它应该看起来像这样：

alt text http://i29.tinypic.com/e026v4.png

对于我使用的边界：

padding: 1.0em; 
border-style: solid; 
border-width: 2px; 
background-color: #FFFFCC; 
border-color:#E8E800;

如果我申请的CSS到，那么边框的宽度与浏览器窗口。我希望边框只与文字一样宽（根据文字大小而变化），因此使用width设置绝对宽度不起作用。我试过display:inline但是那个causes spacing issues with neighboring elements。我也尝试将上面的CSS应用到中包含的，但是当文本太长并且换行时这不起作用。

alt text http://i25.tinypic.com/11jaxw5.png

来源

2009-09-03 Steve Kuo

您是否尝试过使用名为float的CSS属性进行试验？指定float：left会导致包含元素的宽度根据文本调整 - 看起来像是一种次要效果，但它起作用。

如果您不希望包含的元素排列起来， ~~您可以添加 标签或~~ 您可以添加“clear：both;”风格。

我绝对认为它是可以实现的 - 你只需要找到属性/值的正确组合。

来源

2009-09-03 18:53:11 Mayo

如果你走这条路线，你可以添加clearfix来避免额外的标记。（http://www.positioniseverything.net/easyclearing.html） – easement 2009-09-03 19:01:40

注意：'
'标记不会阻止排列元素，除非您将一些基本的CSS应用于它们：'br {clear：left; }' – brianreavis 2009-09-03 19:01:55

我只是抓出标签参考 - 问题是关于css无论如何:) – Mayo 2009-09-03 19:10:38

听起来像一个表给我...哦，我可以看到评论和向下票来了。 “表格仅用于表格数据”...是的，我知道，但他们也是一个完成史蒂夫想要做的事情的方式。

来源

2009-09-03 18:41:53 Badfish

通过将高亮显示的段落作为块元素向左浮动（缺省为），您可以获得突出显示的段落以最小限度地围绕文本。然后，将段落设置为clear:left以防止它们水平堆叠。

的CSS：

.pars { 
    /* this is used to prevent the last floating element 
    from causing issues below the paragraph (.pars) container */ 
    width: 100%; 
    overflow: visible; 
} 
.pars p { 
    clear: left; 
    margin: 0 0 0.5em 0; 
} 
.pars .highlighted { 
    float: left; 
    padding: 1.0em; 
    border-style: solid; 
    border-width: 2px; 
    background-color: #FFFFCC; 
    border-color:#E8E800; 
}

你的HTML：

<div class="pars"> 
    <p>Some paragraph text</p> 
    <p class="highlighted">Some bordered text</p> 
    <p class="highlighted">Some more bordered text</p> 
    <p>Some very long bordered text blah blah blah 
    blah blah blah blah blah blah blah blah blah blah</p> 
</div>

来源

2009-09-03 18:53:48 brianreavis

怎么样显示：inline-block的？

来源

2009-09-03 18:54:47 easement

IE6 /跨浏览器的内联块的东西：http://foohack.com/2007/11/cross-browser-support-对于内联 - 嵌段 - 定型/ – easement 2009-09-03 18:56:51

只需添加

p.highlighted { 
    float: left; 
} 

p { 
    clear: both; 
}

这将导致高亮段落，只需要通过自己的文本，并确保现有的段落从不与标明的水平重叠一样宽。

来源

2009-09-03 19:00:25

使用CSS最小化边框文字的边框

回答

相关问题