Question

我希望列表中标签的边界底部延伸到全长。但是，它仅覆盖我认为是因为我如何设置东西的标签。（我正在用Angular编写代码）

html代码：

<fa (click)="backToHome()" class="arrow" name="chevron-left"></fa>
<h1>جستجو</h1>
<br /><br /><br /><br />
  <div class="search">
    <input class="input" [(ngModel)]="item" required placeholder="جستجو میان محصولات و برندها" />
    <fa class="icon" name="search" (click)="fetchProducts()"></fa>
  </div>
<p>تاریخچه جستجو</p>
<br />
<br />

  <ul *ngIf="resultSearch && resultSearch.length">
    <li *ngFor="let product of resultSearch">
        <a (click)="backToHome()">{{product.name}}</a>
    </li>
  </ul>
<p *ngIf="condition()">!نتیجه ای یافت نشد</p>

<router-outlet></router-outlet>

和CSS代码：

.search{
    position: relative;
    width: 330px;
    height: 40px;
    line-height: 40px;
    padding: 0px;
    margin: 5px;
    border-radius: 6px;

}
.input{
    background: #e7e5e5;
    width: 90%;
    height: 30px;
    font-size: 15px;
    border-radius: 6px;
    padding: 5px 15px; 
    text-align: right;
    line-height: 30px;
    overflow: hidden;
    display: block;
    outline: none;
    border: none;
    box-sizing: border-box;
}
.history{

    color:grey;

}
.icon{
    position: absolute;
    left: 5px;
    top: -3px;
    color:grey;
    cursor: pointer;
}
.arrow{

    position: absolute;
    top:20px;
    left: 5%;
    color: gray;
    cursor: pointer;

}
h1{
    position: absolute;
    right:40px;
    float: right;
}
p{

    position: absolute;
    right:0;
    color: grey;
}
::placeholder{
    font-family: iransans;
    color: grey;
}
ul{
    border:1px solid red;
    list-style: none;
    float: right;
    display: block;

}
ul li a{

    cursor: pointer;
    border-bottom: 1px solid grey;
    border-width: thin;
    color: grey;
    text-decoration: none;
}

http://8upload.ir/uploads/f39852.jpg（现在的样子） http://8upload.ir/uploads/f66439623.jpg(the应当的样子）

Answer 1

给a和class="whatever"。然后在CSS中执行.whatever { display: block; }。这将使链接采用li父级的完整宽度。

<ul *ngIf="resultSearch && resultSearch.length">
    <li *ngFor="let product of resultSearch">
        <a (click)="backToHome()" class="whatever">{{product.name}}</a>
    </li>
</ul>
<style>
  .whatever { display: block; }
</style>

或者简单地做（根据您当前拥有的CSS）：

ul li a { display: block; }

标签底下的边框底未扩展到全角（角度）

1 个答案: