亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使超鏈接顯示在不同的行

如何使超鏈接顯示在不同的行

當年話下 2023-07-20 09:44:42
您好,我正在制作一個圖書網站,我嘗試使用 href 添加超鏈接,但它出現在同一行中,有什么方法可以使其顯示在不同的行中嗎?這是它現在的顯示方式const petsData = [{? name: "Story Book",? species: "Jean Lumier",? favFoods: ["wet food", "dry food", "<strong>any</strong> food"],? birthYear: 2016,? href: "https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png",? photo: "https://nice-assets.s3-accelerate.amazonaws.com/smart_templates/e639b9513adc63d37ee4f577433b787b/assets/wn5u193mcjesm2ycxacaltq8jdu68kmu.jpg"},{? name: "Barksalot",? species: "Dog",? href:"https://www.amazon.in/Redmi-9A-2GB-32GB-Storage/dp/B08696XB4B/ref=gbph_img_m-2_0ec7_a9c5af13?smid=A23AODI1X2CEAE&pf_rd_p=cbec21a0-e969-48e2-8697-caf621220ec7&pf_rd_s=merchandised-search-2&pf_rd_t=101&pf_rd_i=1389401031&pf_rd_m=A1VBAL9TL5WCBF&pf_rd_r=7N08PRZ1WREYVED1R3Q4",? birthYear: 2008,? photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"},{? name: "Meowsalot",? species: "Cat",? favFoods: ["tuna", "catnip", "celery"],? birthYear: 2012,? photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"}];//empty space thing (?)function petTemplate(pet) {??return `<div class ="image-grid">? ?<div class="animal">? ?? ? ? <img class="pet-photo " src="${pet.photo}">? ? ?? ? ??? ? ? <div class="olay">? ? ??? ? ??? ? ? <h2 class="pet-name">${pet.name}? ? ? //href here? ? ? <h1 class="species">${pet.species}? ? ? <a href= ${pet.href}> Read Reviews</a>? ? ??? ? ??? ? ??? ? ??? ? ? ?<div></div></div>? ? ? </div>? ?</div>??`;}(抱歉英語不是我的主要語言)
查看完整描述

3 回答

?
森欄

TA貢獻1810條經驗 獲得超5個贊

有幾種簡單的方法可以實現這一目標:

也許很容易將鏈接包裝在 div 中

<div><a href= ${pet.href}> Read Reviews</a></div>

br另一種選擇是在鏈接之前添加標簽<a href= ${pet.href}> Read Reviews</a>

完成任務的最標準方法可能是在 CSS 樣式中使用 Flexbox。


查看完整回答
反對 回復 2023-07-20
?
慕娘9325324

TA貢獻1783條經驗 獲得超4個贊

嘗試這個


<div class ="image-grid">

   <div class="animal">

   

      <img class="pet-photo " src="${pet.photo}">

     

      

      <div class="olay">

      

      

      <h2 class="pet-name">${pet.name} </h2>

      //href here

      <h1 class="species">${pet.species} </h1>

      <a href= ${pet.href}> Read Reviews</a>

      

      </div>

      

      

       

      </div>

   </div>

或者你可以將h2,h1和a標簽放在自己的 div 中


查看完整回答
反對 回復 2023-07-20
?
三國紛爭

TA貢獻1804條經驗 獲得超7個贊

你必須關閉你的<h1>and<h2>標簽(用</h1>and </h2>,而不是用</div>?。?/p>



查看完整回答
反對 回復 2023-07-20
  • 3 回答
  • 0 關注
  • 180 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號