當年話下
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。

慕娘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 中
添加回答
舉報
0/150
提交
取消