如何从图例底部设置字段集边框?

发布于 2024-09-18 04:19:30 字数 574 浏览 13 评论 0原文

我有字段集和图例。字段集边框位于图例的中间,如下所示 alt text

但我想要像下面这样的边框

alt text

边框线应位于图例下方。

我正在使用下面的 css。

.fieldSet
{
    width: 97%; 
    margin-left: 10px;
    border-color: #003366;
}

.legendStyle
{
    border-style:none;
    background-color: #003366;
    font-family: Tahoma, Arial, Helvetica;
    font-weight: bold;
    font-size: 9.5pt;
    Color: White;
    width:30%;
    padding-left:10px;

}

I have fieldset and legend. fieldset border is coming in the middle of the legend like below
alt text

But I want border like below

alt text

Border line should come below legend.

I am using below css.

.fieldSet
{
    width: 97%; 
    margin-left: 10px;
    border-color: #003366;
}

.legendStyle
{
    border-style:none;
    background-color: #003366;
    font-family: Tahoma, Arial, Helvetica;
    font-weight: bold;
    font-size: 9.5pt;
    Color: White;
    width:30%;
    padding-left:10px;

}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

花落人断肠 2024-09-25 04:19:30

试试这个:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
    fieldSet
    {
        width: 97%; 
        margin-left: 10px;
        border:0;
        margin:0;
    }

    legend
    {

        border-style:none;
        background-color: #003366;
        font-family: Tahoma, Arial, Helvetica;
        font-weight: bold;
        font-size: 9.5pt;
        Color: White;
        width:30%;
        padding-left:10px;

    }

    fieldset div { border:1px solid #003366; position:relative; top:-6px }

    </style>
</head>
<body>

    <fieldset>
        <legend>Employee Information</legend>
        <div>
            <label for="x">some label</label>
            <input type="text" name="x" />
        </div>
    </fieldset>

</body>
</html>

try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
    fieldSet
    {
        width: 97%; 
        margin-left: 10px;
        border:0;
        margin:0;
    }

    legend
    {

        border-style:none;
        background-color: #003366;
        font-family: Tahoma, Arial, Helvetica;
        font-weight: bold;
        font-size: 9.5pt;
        Color: White;
        width:30%;
        padding-left:10px;

    }

    fieldset div { border:1px solid #003366; position:relative; top:-6px }

    </style>
</head>
<body>

    <fieldset>
        <legend>Employee Information</legend>
        <div>
            <label for="x">some label</label>
            <input type="text" name="x" />
        </div>
    </fieldset>

</body>
</html>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文