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

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">&nbsp; &nbsp;<div class="animal">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <img class="pet-photo " src="${pet.photo}">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="olay">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <h2 class="pet-name">${pet.name} </h2>&nbsp; &nbsp; &nbsp; //href here&nbsp; &nbsp; &nbsp; <h1 class="species">${pet.species} </h1>&nbsp; &nbsp; &nbsp; <a href= ${pet.href}> Read Reviews</a>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;</div>或者你可以将h2,h1和a标签放在自己的 div 中

Answer 3

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