Border Headlines

Question

Idealerweise möchte ich verschiedene Schlagzeilen (und ihre Bilder) unter Verwendung einer bottom-border teilen. Habe das probiert, aber stattdessen setzt es eine Grenze für das Bild, anstatt zwischen Überschriften.

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

Fügen Sie die oberen und unteren Linien unten, wo Sie Ihre HTML anhängen:

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

Dieser Code verwendet Inline-Styling so sollten Sie eine hinzufügen Klasse zum Div und verschiebe das Styling dorthin.

Best practice wäre eine Klasse-Attribut auf die div wie hinzuzufügen:

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

und definieren Sie Ihre Klasse in einem externen Stylesheet wie:

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