css - bottom border width for text

Question

I have some text which I want underlined. Now, I don't just want the actual text to underline, I want the line to stretch across the screen.

I do:

H4{align:left; font-style: bold; border-bottom: 1px black solid;}

However, I don't want the line to run the entire width of the screen. I only want it to be say 750px wide or a percentage of the screen. I try:

H4{align:left; font-style: bold; border-bottom: 1px black solid; width:750px;} 

But this does not work. The line still runs the entire width of the page. Any tips?

Answer 1

用一个<hr />

然后在CSS中：

hr{
    width: 75%;
    border: solid #DDD;
    border-width: 1px 0 0;
    clear: both;
    margin: 10px 0 30px;
    height: 0;
    margin-left: auto;
    margin-right: auto;
}

Answer 2

我怀疑您还有其他一些 CSS 覆盖了您的定义。例如，您的 CSS 确实按预期运行：http: //jsfiddle.net/pvjvA/1/

h4 {
  text-align:left; 
  font-style: bold; 
  border-bottom: 1px black solid; 
  width:750px;
}