Width is not working

前端 未结 3 1193
攒了一身酷
攒了一身酷 2021-01-25 23:57

Sorry for this silly question, but i stick because of this problem, the width of the anchor tag is not working, basically i want to increase the height of the anchor tag so the

相关标签:
3条回答
  • 2021-01-26 00:32

    Inline elements can't have altered width. You need to make that anchor a block, or inline-block, see here (gave it a green background so you can see how wide it is):

    .filteredRestBody {
        background: none repeat scroll 0 0 white;
        border: 1px dotted #5bc0de;
        border-top-left-radius: 23px;
        box-shadow: 0 0 0 grey;
        height: auto;
        padding: 0 0 47px 8px;
        position: relative;
        top: 30px;
        width: 115%;
    }
    
    .filterThumbnails {
        background-position: 2px -19px;
        background-repeat: repeat;
        border-top-left-radius: 10%;
        border-top-right-radius: 10%;
        height: 300px;
        margin-left: 4.3%;
        margin-top: 50px;
        width: 234px;
    }
    
    .restaurantThumbnailsTitle {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
        color: white;
        font-size: 1.6em;
        height: 95px;
        margin-left: -14px;
        position: relative;
        top: 44.7%;
        width: 114%;
      }
    
    .restaurantThumbnailsTitle a {
      display: block;
      background-color: green;
    }
    
    .restaurantThumbnailsTitle a:hover { 
      background-color: white;
    }
    <div id="filteredRestBody" class="row filteredRestBody">
       <div id="row1" class="row">
           <div id="indianchilly" class="col-sm-4 filterThumbnails" style="background:url('images/yochinathumbbck.jpg')">
               <img src="images/bestoffers.png">
               <div id="discountNum">Discount 15%</div>
               <div class="ratingsContainer">
                   <div id="restaurantThumbnailsTitle" class="restaurantThumbnailsTitle">
                       <a href="viewRestaurant.php?rest=yochina">Indian Chilly</a>
                       <p class="restaurantThumbnailsTitleText">chilled out chinese</p>
                   </div>
               </div>
           </div>
       </div>
    </div>

    0 讨论(0)
  • 2021-01-26 00:35

    See the spec:

    'width'

    • Value: <length> | <percentage> | auto | inherit
    • Initial: auto
    • Applies to: all elements but non-replaced inline elements, table rows, and row groups
    • Inherited: no
    • Percentages: refer to width of containing block
    • Media: visual
    • Computed value: the percentage or 'auto' as specified or the absolute length

    a elements are, by default, non-replaced inline elements. So width property doesn't apply.

    0 讨论(0)
  • 2021-01-26 00:46

    an a tag is inline so it's not affected by width or height, add display:inline-block; to it's css and you should then be able to adjust it.

    0 讨论(0)
提交回复
热议问题