Question

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

jsp中js代码：
<div class='fileline'><a href='fileDownload.action?uploadFile.filePath="+file.filePath
+"&uploadFile.fileName="+file.fileName+"'>"+file.fileName+"</a></div>

css样式：
.fileline{
/* height: 28px; */
line-height: 30px;
border-bottom-color: rgb(204,204,204);
border-bottom-width: 1px;
border-bottom-style: solid;
background-color: rgb(255,255,255);
}

Answer 1

.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; 设置左边框的样式宽度及颜色。

Answer 2

.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>标签写就行

如果不加display:block的话，应该是会出现文字有多长下划线就有多长的情况，我觉得你应该不是想要长短不一的效果

Answer 3

.fileline>a{
  border-bottom-color: rgb(204,204,204);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background-color: rgb(255,255,255);
  padding-bottom: ;/*这边调整一下。*/
}

希望能帮到你.