1

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

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

图片中提供的示例。例子

4

4 回答 4

2

在 css 中使用水平线。

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

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

请参阅 jsfiddle

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

于 2013-05-27T13:10:39.467 回答
1

也许像这样？

HTML

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

CSS

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

演示

先试后买

于 2013-05-27T13:02:50.223 回答
1

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";

当然是小提琴！

于 2013-05-27T13:24:14.083 回答
1

在我看来，从中间到右侧获得一条正确缩放且纯 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 - Simple div
CSS - Experimentation
Browser Stats - Stat Counter过去一个月的浏览器版本使用情况。

  • 在撰写本文时正确。
于 2013-05-27T13:27:56.633 回答