PDA

View Full Version : قرار دادن خط عمودی کنار لینک ها


omidparkour
شنبه 14 تیر 1393, 04:00 صبح
سلام
من میخوام چندتا لینک داشته باشم که کنار هر کدوم با فاصله ی مثلا 10 پیکسل از اون لینک یک خط عمودی باشه و بعدش لینک بعدی و بعدش دوباره خط عمودی
چطور باید اینکارو بکنم؟
vimax23
شنبه 14 تیر 1393, 12:41 عصر
سلام
من میخوام چندتا لینک داشته باشم که کنار هر کدوم با فاصله ی مثلا 10 پیکسل از اون لینک یک خط عمودی باشه و بعدش لینک بعدی و بعدش دوباره خط عمودی
چطور باید اینکارو بکنم؟

دو سه راه به نظرم میرسه
اولی اینکه یه دیو تعریف کنی بعد border-left بدی البته با padding باید فاصله از داخل رو تنظیم کنی که زشت نشه
دومی اینه که یه اسپن بزاری توش یه بک گراند به صورت پیکسلی بزرگش کنی
سومی اینه که بازم یه اسپن بزاری border-right یا left بدی
شاید راههای بیشتری هم باشه
ab.ali
شنبه 14 تیر 1393, 13:01 عصر
اگر از li استفاده کردین باید به li ها تون border-right یا left بدین و بعدش به همون li ها padding-right بدین تا فاصله بگیرن ام برای اینکه اولین border رو هم بردارین باید از first-child استفاده کنید !
qartalonline
شنبه 14 تیر 1393, 13:37 عصر
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<style type="text/css">
#nav li{
list-style: none;
display: block;
float: right;
border-left: 1px #017030 solid;
height: 20px;
}
#nav li:last-child{
border: none;
}
#nav li a{
display: block;
height: 30px;
margin: 0 5px;
margin-top: -5px;
line-height: 30px;
padding: 0 10px;
}
#nav li a:hover{
background-color: darkseagreen;
}
</style>
</head>
<body>

<ul id="nav">
<li><a href="#">صفحه ی اصلی</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>

</body>
</html>