怎样设置border线的长度和文字一样长？如图中border的线太长了。

.fileline a{

/* height: 28px*/

line-height: 30px

display:block

width:50%

border-bottom-color: rgb(204,204,204)

border-bottom-width: 1px

border-bottom-style: solid

background-color: rgb(255,255,255)

}

把样式写给<a>，这样，调整width的值就可以了，设置成百分比或者px都可以。如果超链接本身就有样式的话，那么就把div的border去掉，给<a>标签写就行。

扩展资料：

border的属性：

1、border:1px solid #000可同时设置上右下左的边框的样式宽度及颜色。

2、border-style:solid设置上右下左边框的样式。

3、border-width:1px 2px 3px 4px设置上右下左边框的宽度。

4、border-color:#000设置上右下左边框的颜色。

5、border-top:1px solid #000设置上边框的样式宽度及颜色。

6、border-right:1px solid #000设置右边框的样式宽度及颜色。

7、border-bottom:1px solid #000设置下边框的样式宽度及颜色。

8、border-left:1px solid #000设置左边框的样式宽度及颜色。

1、首先需要获取到相应的元素，这样才能改变他的样式。获取方法可以通过getElementByID()，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。参考：http://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp

2、然后就是修改元素的属性了。比如你将获取到的元素赋值给了变量a,那么修改该元素的border-bottom就是:

a.style.borderBottom="20px"

width就是：

a.style.width="200px"

通过js来改变CSS属性，使用jQuery可以很方便的实现，像这样：

$("img").css('border-color','red')

就可以把边框颜色都变成红色。

这是针对此问题的测试页面

2、这是3张图片

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=975878983,2392470128&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=61343736,951557457&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1354592590,1762022981&fm=11&gp=0.jpg'>

3、这是图片的样式，边框默认为灰色。

img{

max-width:200px

border-color:gray

border-width:10px

border-style:solid

}

4、现在通过这几行用到jQuery的代码，控制图片边框根据鼠标移入移出边框变灰和变红。

$(function(){

$("img").on('mouseover',function(){

$(this).css('border-color','red')

}).on('mouseout',function(){

$(this).css('border-color','gray')

})

})

5、效果如图

---