Question

如何从页面中间到右侧绘制一条线（使用css，html或js）？

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

图片中提供的示例。 example

Answer 1

在css中使用水平规则。

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

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

请参阅jsfiddle

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

Answer 2

也许是这样的？

<强> HTML

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

<强> CSS

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

<强>演示

Try before buy

Answer 3

<强> HTML：

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

<强>的CSS：

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

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!

Answer 4

在我看来，从中间到右边获得正确缩放的线条并且是纯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*/
}

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

来源： HTML - 简单的div CSS - 实验
浏览器统计信息 - 统计信息的this month past.

的浏览器版本使用情况

在撰写本文时正确。

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

4 个答案: