边境标题

Question

理想情况下，我想使用bottom-border分割不同的标题（及其图像）。试过这个，但它在图像上放置了一个边框，而不是标题之间。

的jQuery

$(document).ready(function() {
  $.ajax({

    url: "https://newsapi.org/v2/top-headlines?sources=the-sport-bible&apiKey=7822ca100cdf43e1a85e1e101aa69c06",
    method: "GET",
    success: function(data) {
      processData(data);
    }
  });


  function processData(data) {
    var articleItems = [];
    for (var i = 0; i < 5; i++) {

      var author = data.articles[i].author;
      var title = data.articles[i].title;
      var description = data.articles[i].description;
      var urlToImage = data.articles[i].urlToImage;
      var artUrl = data.articles[i].url;


      var $author      = `<div class="author">Author: ${author}</div >`
      var $title       = `<a href="${artUrl}"><div class="title">${title}</div ></a>`
      var $description = `<a href="${artUrl}"><div class="description">${description}</div></a>`
      var $urlToImage  = `<a href="${artUrl}"><img class="urlToImage" src="${urlToImage}">`;

      $("#sport_news").append(`${author}${$title}${$description}${$urlToImage}`);
      $("#sport_news").append("<br />");

      console.log(artUrl);
    }
  }
});

HTML

<div class="tab-pane fade" id="sport">
        <h3>SPORT</h3>
        <p id="sport_news"></p>
      </div>

Answer 1

在您附加html的地方下方添加顶行和底行：

  $("#sport_news").append("<div style='border-bottom: 2px solid;' >");
  $("#sport_news").append(`${author}${$title}${$description}${$urlToImage}`);
  $("#sport_news").append("<br />");
  $("#sport_news").append("</div>");

此代码使用内联样式，因此您应该将一个类添加到div并将样式移动到那里。

最佳做法是将一个类属性添加到div中，如：

$("#sport_news").append("<div class='headline'>");

在外部样式表中定义您的类，如：

.headline
{
  border-bottom: 2px solid;
}