如何很好地隐藏CSS边界的一部分 [英] How to hide a part of a CSS borderline nicely

问题描述

我正在为iPhone做一个网络应用程序，我遇到了一些边界问题。
为了简化我的身体背景图像，一个带有圆角的盒子，里面有一些元素和一个标题，这就是问题开始的地方，因为我希望我的标题在盒子的顶部边框上，而没有

以下是截图：

我看不到任何解决方法来正确渲染它，你们中的一些人有任何猜测？
它将不胜感激

解决方案

从我能收集的信息看来，您应该使用 fieldset 元素（就像您将表单元素分组在一起）一样，它也很方便地显示出您希望的方式：

 <字段集> 
<图例>启动子< /图例> 
< select> 
< option>选择启动器< / option> 
< / select> 
< / fieldset> 
  

造型很简单。使用CSS对齐图例文本和样式字段集边框：

  fieldset {
 border：1px纯黑色; 
 border-radius：5px; 
} 
 legend {
 text-align：center; 
} 
  

有关实例，请参阅这个jsFiddle演示。

i'm doing a web app for iPhone, i'm having some troubles with borders. To simplify things i have a background image for body, a box with rounded corners which have some elements inside and a title, and that's where problems begins as i want my title to be on the top border of my box without having the borderline behind it.

Here is a screenshot : I can't see any solutions to render it properly, some of you have any guess ? It would be much appreciated

解决方案

From what I can gather, it looks like you should be using the fieldset element (as you are "grouping" form elements together), which conveniently also looks the way you want it to:

<fieldset>
    <legend>Promoter</legend>
    <select>
        <option>Choose a promoter</option>
    </select>
</fieldset>

Styling is simple. Align the legend text and style the fieldset border using CSS:

fieldset {
    border: 1px solid black;
    border-radius: 5px;
}
legend {
    text-align: center;
}

For a live example, see this jsFiddle demo.

这篇关于如何很好地隐藏CSS边界的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！