如何重複一個點（「。」）字符（或任何其他），使繪製的線寬度填充屏幕的寬度？

如何重複一個字符（比方說a。），使得使用點繪製的線的寬度始終與屏幕寬度相同。我正在使用以下代碼繪製點線：如何重複一個點（「。」）字符（或任何其他），使繪製的線寬度填充屏幕的寬度？

<label style="color:red">...........................</label>

很明顯，在這種情況下點的數量是固定的。我的目標是繪製一條與屏幕寬度匹配的線。我是網頁設計的初學者，所以，任何幫助將不勝感激。

來源

2014-11-06 Deep Arora

這不是[[]]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label）的用處。 – 2014-11-06 08:47:13

你在錯誤的軌道上。

<label style="color:red">...........................</label>

這不是你如何繪製一條虛線。

其虛線邊框小提琴完成：http://jsfiddle.net/rrce76r9/

<div class="dotted"></div> 

.dotted{ 
    border-bottom:3px dotted red; 
}

來源

2014-11-06 08:40:51

我怎樣才能確保它們在虛線的左側和右側有一些空間？我嘗試在上面的css類中添加margin-left和margin-right屬性。奇怪的是，我能夠在行左邊有空白區域;但不在右邊。這就是我寫的：.dotted border-top：2px dotted red; .dotted {0} {0} {0} margin-left：50px; margin-right：50px; } – 2014-11-06 10:22:49

看看這個問題dep2k http://stackoverflow.com/questions/6250394/how-to-increase-space-between-dotted-border-dots – 2014-11-06 10:31:38

這並不回答問題。誠然，它可能會回答一個更好的問題，本來應該被問到，但是SO被組織成問題並回答問題。 – 2014-11-06 11:05:56

//Now All the lines is available for you whatever u can choose... 

// This is Html Code. Name of this file u can give like Borders.html 

    <html> 
    <head> 
     <title> 
      Border Test 
     </title> 
     <link rel="stylesheet" href="borders.css" type="css/text"/> 
    </head> 
    <body> 
     <h1 id="solid">This is solid Border</h1> 
     <h1 id="dotted">This is dotted Border</h1> 
     <h1 id="dashed">This is dashed Border</h1> 
     <h1 id="double">This is double Border</h1> 
     <h1 id="groove">This is groove Border</h1> 
     <h1 id="ridge">This is ridge Border</h1> 
     <h1 id="outset">This is outset Border</h1> 
     <h1 id="inset">This is inset Border</h1> 
    </body> 

</html> 

//This is Css code for the above Html file. You can give the name of this file as Borders.css. 

#solid 
{ 
    border-bottom:2px solid black; //here u can use border-top,border-left, border-right also instead of border-bottom. 
} 
#dotted 
{ 
    border-bottom:2px dotted black; 
} 
#dashed 
{ 
    border-bottom:2px dashed black; 
} 
#double 
{ 
    border-bottom:2px double black; 
} 
#groove 
{ 
    border-bottom:2px groove black; 
} 
#ridge 
{ 
    border-bottom:2px ridge black; 
} 
#outset 
{ 
    border-bottom:2px outset black; 
} 
#inset 
{ 
    border-bottom:2px inset black; 
}

來源

2014-11-06 09:23:50

你不能讓人物完全相同相同的寬度爲某些給定寬度，一排諸如整個可用寬度，這是什麼你可能意思是「屏幕寬度」。但我想你應該要求在可用空間的限制範圍內儘可能多地在一行上寫上儘可能多的字符。約束是真正的父元素的寬度，因此我們可以通過多次追加做到這一點，直到我們超過限制，那麼退一步「」：

<span id=dots style="color:red"></span> 
 
<script> 
 
var dots = document.getElementById('dots'); 
 
dots.style.visibility = 'hidden'; 
 
var width, savedContent; 
 
do { 
 
    savedContent = dots.innerHTML; 
 
    dots.innerHTML += '.'; 
 
} while(dots.offsetWidth < dots.parentNode.offsetWidth); 
 
dots.innerHTML = savedContent; 
 
dots.style.visibility = 'visible'; 
 
</script>

的例子使用span代替label，因爲這樣的文本很難適合用作控件的標籤。但是，此元素的選擇不會影響此問題。

請注意，即使瀏覽器窗口寬度以改變父元素寬度的方式更改（例如，當我們的元素是body的子項並且我們沒有寬度設置時，該字符串一旦創建就會保持不變在CSS中）。

來源

2014-11-06 11:35:13

如何重複一個點（「。」）字符（或任何其他），使繪製的線寬度填充屏幕的寬度？

回答

相關問題