Enespınar
Hectopat
- Katılım
- 18 Haziran 2018
- Mesajlar
- 324
- Çözümler
- 1
Daha fazla
- Cinsiyet
- Erkek
<Ul>'deki <li>'leri sayfaya ortalamak istiyorum fakat birçok kod denedim çalışmadı. En son bu gruptaki bir kodu denedim fakat o da <ul>'deki <li>'leri ortaladı ama <li>'deki <a>'lar ortada olmadığından 2. görseldeki gibi bir sonuç çıktı. Yardımlarınızı bekliyorum.
JavaScript:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
const App = () => {
return (
<div className = "container">
<div className = "menu">
<div className ="uldiv">
<ul id="menuul">
<li id = "anasayfa"><a href = "/anasayfa">Ana Sayfa</a></li>
<li id = "indir"><a href = "/indir">İndir</a></li>
<li id = "hakkimizda"><a href = "/hakkımızda">Hakkımızda</a></li>
</ul> <div className = "temizle"> </div>
</div>
</div>
</div>
)
};
ReactDOM.render(
<App />,
document.querySelector("#root")
);
CSS:
.uldiv ul {
list-style-type:none;
height: 18px;
overflow: hidden;
width: 50%;
display: table;
table-layout: fixed;
margin: 0px auto;
padding: 20px 0px;
}
.uldiv{
margin: 0 auto;
}
.uldiv ul li{
display: table-cell;
width: auto;
text-align: center;
}
.uldiv ul li a{
float: left;
padding: 0px 10px;
text-decoration: none;
font-weight: bold;
color: #FFE21F;
}
.uldiv ul li a:hover {
color: #2e373f;
}
.menu{
padding: 10px;
background: #141d25;
}
.temizle {
clear: both;
}
body{
background: #141d25;
}
Son düzenleyen: Moderatör: