After successfully creating a horizontal list using HTML and CSS, I encountered an issue when trying to replicate the same code in my React application. In React, the list elements were stacking on top of each other due to a styling conflict with the stylesheet. Below is the original HTML code along with its corresponding stylesheet:
.os{
width:800px;
height: 20px;
list-style: none;
text-align: justify;
margin: 80px auto;
background-color: black;
}
.os:after {
display: inline-block;
content: "";
width: 100%;
}
/* Remaining CSS styles */
<!DOCTYPE html>
<html>
<head>
<title>react</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="os">
<li data-year="2016" data-text="lorem"></li>
<li data-year="2017" data-text="ipsum"></li>
<li data-year="2018" data-text="dolor"></li>
</ul>
</body>
</html>The React code implementation appeared as follows:
render(){
return(
<ul className="os">
{/*{json.map((row,index)=>{
var tytul = row.tytul
var data = row.data
return <li key={row.id} data-year={data} data-text={tytul}></li>
})}*/}
<li data-year="2016" data-text="lorem"></li>
<li data-year="2017" data-text="ipsum"></li>
<li data-year="2018" data-text="dolor"></li>
</ul>
)
}
However, the rendered output did not align properly as shown in this image. Both the HTML version and React app referenced the same stylesheet for styling.