如何使超链接显示在不同的行

Question

您好，我正在制作一个图书网站，我尝试使用 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>  `;}（抱歉英语不是我的主要语言）

Answer 1

有几种简单的方法可以实现这一目标：

也许很容易将链接包装在 div 中

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

br另一种选择是在链接之前添加标签<a href= ${pet.href}> Read Reviews</a>

完成任务的最标准方法可能是在 CSS 样式中使用 Flexbox。

Answer 2

尝试这个

<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 中

Answer 3

你必须关闭你的<h1>and<h2>标签（用</h1>and </h2>，而不是用</div>！）