Question

是否可以使用CSS实现附加结果？

目前，我可以绘制圆圈并添加单行。如何在线下方添加标签？如何在圆圈的右侧添加标签？

我的HTML：

<body>
    <div id="circle"></div>
    <div id="line"></div>
</body>

我的CSS：

#circle {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    border-radius: 50px;
    position: absolute;
    top: 200;
    left: 400px;
}

#line {
    height: 45px;
    border-left: 1px solid blue;
    position: absolute;
    top: 110px;
    left: 450px;
}

Answer 1

您可以将css pseduo elements用于此目的。但是，您必须分别为它们调整位置和内容。

CSS：

#line:before{
    position:absolute;
    text-align:center;
    content:'A';
    top:50%;
    left:10px;
}
#line:after{
    position:absolute;
    text-align:center;
    content:'B';
    top:50%;
    right:10px;
}

演示：http://jsfiddle.net/GCu2D/135/

对于动态标签文本，您也可以使用此方法：

HTML：

<div id="circle"></div>
<div id="line" data-left="ABC" data-right="DEF" ></div>

CSS：

#line:before{
    position:absolute;
    text-align:center;
    content:attr(data-left);/*This will display the attribute values as content*/
    top:50%;
    left:10px;
}
#line:after{
    position:absolute;
    text-align:center;
    content:attr(data-right);/*This will display the attribute values as content*/
    top:50%;
    right:10px;
}

动态内容演示：http://jsfiddle.net/GCu2D/136/

Answer 2

因为一切都是position:absolute我还添加了一个绝对位置的标签。您可以在任何地方创建，只需使用top和left

进行游戏

希望这有帮助。

<div id="circle"></div>
<div id="line"></div>
<label id="leftlabel">test<label>

#circle
{
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    border-radius: 50px;
    position: absolute;
    top: 200;
    left: 400px;
}

#line
{
    height: 45px;
    border-left: 1px solid blue;
    position: absolute;
    top: 110px;
    left: 450px;
}
#leftlabel
{
    position: absolute;
    top:50px;
    left: 350px;
}

这是小提琴。

http://jsfiddle.net/sk8c3/

Answer 3

喜欢这个吗？

http://jsfiddle.net/HvsVG/

 <body>
    <div id="circle"></div>
    <div id="line"></div>
    <div id="label1">Label456</div>
    <div id="label2">Label123</div>
 </body>


    #circle
{
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    border-radius: 50px;
    position: absolute;
    left: 400px;
}

#line
{
    height: 45px;
    border-left: 1px solid blue;
    position: absolute;
    top: 110px;
    left: 450px;
}
#label1 {
    position: absolute;
    top: 150px;
    left: 425px;
}
#label2 {
    position: absolute;
    top: 47px;
    left: 510px;
}

Answer 4

这里有一个小提琴http://jsfiddle.net/keypaul/2KLx6/29/

CSS

    .wrapper {
        position:relative;
        width:auto;
        height:auto;
    }
    .circle
        {
            height: 100px;
            width: 100px;
            border: 1px solid blue;
            border-radius: 50px;
            position: absolute;
            top: 200;
            left: 200px;
        }
    .line-right {
            width: 45px;
            border-top: 1px solid blue;
            position: absolute;
            top: 50px;
            left: 301px;
        }
    .line-left {
            width: 45px;
            border-top: 1px solid blue;
            position: absolute;
            top: 50px;
            left: 155px;
        }
    .line-bottom
        {
            height: 45px;
            border-left: 1px solid blue;
            position: absolute;
            top: 101px;
            left: 250px;
        }
    .txt-top {
        position:absolute;
        margin:-30px 0 0 0 ;
    }
    .txt-bottom {
        position:absolute;
        margin:10px 0 0 0 ;
    }
    .txt-left {
        position:absolute;
        margin:0 0 0 -45px ;
    }
    .txt-right {
        position:absolute;
        margin:0 0 0 20px ;
    }

HTML

 <div class="wrapper"> 
    <div class="circle"></div>
    <div class="line-bottom">
        <span class="txt-left">text</span>
        <span class="txt-right">text</span>
    </div>
    <div class="line-right">
        <span class="txt-top">text</span>
        <span class="txt-bottom">text</span>
    </div>
    <div class="line-left">
        <span class="txt-top">text</span>
        <span class="txt-bottom">text</span>
    </div>
</div>

然后你需要调整边距，或者为你的跨度设置一个固定的宽度（并显示：inline-block），这样你就可以了解文本

Answer 5

HTML

<div id="circle1" class="circle"></div>
<div id="line1" class="line vertical" data-left="a" data-right="b" ></div>
<div id="line2" class="line horizontal" data-top="a" data-bot="b" ></div>

CSS

/*initialize your element position using id's*/

#circle1{
    top: 200;
    left: 400px;
}
 #line1{
    position: absolute;
    top: 110px;
    left: 450px;
}

#line2{
    position: absolute;
    top: 60px;
    left: 355px;
}

/* Classes */

.circle {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    border-radius: 50px;
    position: absolute;
}

.line.vertical {
    height: 45px;
    border-left: 1px solid blue;
}

.line.vertical:before{
    position:absolute;
    text-align:center;
    content:attr(data-left);
    top:50%;
    left:10px;
}

.line.vertical:after{
    position:absolute;
    text-align:center;
    content:attr(data-right);
    top:50%;
    right:10px;
}

.line.horizontal {
    height: 45px;
    width: 45px;
    border-top: 1px solid blue;
    position:absolute;
    text-align:center;
}

.line.horizontal:before{
    position:absolute;
    text-align:center;
    content:attr(data-top);
    right:10px;
    top:-50%;
}

.line.horizontal:after{
    position:absolute;
    text-align:center;
    content:attr(data-bot);
    top:10%;
    left:0px;
}

USAGE

用于初始化元素位置使用id。
用于样式线或圆圈添加line或circle类
用于实现竖线添加vertical类
用于实现竖线添加horizontal类

http://jsfiddle.net/Q2LET/

回答类似于@Kamlesh Kushwaha

CSS：在行上方和下方添加标签

5 个答案:

HTML

CSS

USAGE