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 - シンプルな div
CSS - 実験Browser Stats -過去 1 か月間
の Stat Counter のブラウザー バージョンの使用状況。

  • 執筆時点で正しい。
于 2013-05-27T13:27:56.633 に答える