如何从页面中间到右侧绘制一条线？

How to draw a line (using css, html or js) from the middle of the page to the right side?

如何从页面中间到右侧绘制一条线(使用css,html或js)?

This should work on a different screen resolutions.

这应该适用于不同的屏幕分辨率。

The example provided in the picture. 如何从页面中间到右侧绘制一条线？

图中提供的示例。

4 个解决方案

#1

Maybe like this?

也许是这样的?

HTML

<div class="line"></div>

CSS

div.line {
    width: 75%;
    height: 1px;
    margin-left: 25%;
    background: red;
}

Demo

Try before buy

买前先试试

#2

Using a horizontal rule in css.

在css中使用水平规则。

hr {
 color: white;
 background: blue; 
 width: 75%; 
 height: 5px;
 margin-left:25%;
}

<body>
<hr />
<hr/>
</body>

Please see jsfiddle

请参阅jsfiddle

http://jsfiddle.net/yvytty/jJRAt/

#3

html:

<div id="lineID" class="line"></div>

css:

 .line{  
    background:red;    
    height: 1px;
margin-left:50%;
        }

javascript for more dynamic control:

javascript更动态控制:

//you can also put all the css in here

    var scr=screen.width/2
    var myLine = document.getElementById('lineID');
    myLine.style.cssText= "width:"+scr+"px";

fiddle of course!

小提琴当然!

#4

To my mind the best way to get a line from the middle to the right which scales correctly and is pure CSS is the following:

在我看来,从中间到右边获得正确缩放的线条的最佳方法是纯CSS,如下所示:

HTML

<div class="lineblock"></div>

CSS

  .lineblock{
    width: 50%; /*width can vary yours looks to be ~75% */
    height: 20px; /* Random thickness I chose to make sure I saw it on the page */
    float: right; /* Always forces to the right-hand side of the parent (so make sure
                     you're in the top level of the page or have no 'container' div
                     surrounding your line)*/
    background: magenta; /*shows on anything*/
}

This method is both - a) Going to scale to all device screen sizes and be 50% of the viewport, and, b) be dumb enough to be IE 8 + safe (probably more but I only test to 8 it is used by about 10-12% of people internationally* and below that is almost nobody these days).

这个方法都是 - a)要扩展到所有设备屏幕大小并且是视口的50%,并且,b)足够愚蠢到IE 8 +安全(可能更多,但我只测试到8它被大约使用10-12%的国际人口*以及现在几乎没有人在这些日子里。

Sources: HTML - Simple div
CSS - Experimentation
Browser Stats - Stat Counter's browser version usage for this month past.

资料来源:HTML - 简单的div CSS - 实验浏览器统计数据 - Stat Counter的浏览器版本使用情况。

Correct at time of writing.

在写作时正确。

#1