display

[fr_sdgh]

تفاوت inline و inline-block در چی هست؟

چرا در کد زیر اگر display: table رو برداریم دیگه وسط چین نیست؟



<div class="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
</ul>
</div>







.menu {
width: 1000px;
margin: 0 auto;
background:lime;
height:40px;
}
ul{
margin:0 auto;
width:auto;
display:table;
padding:10px;
}
ul li{
list-style: none;
display:inline;
margin:0;
}
ul li a{
padding:5px 30px;
text-decoration: none;
text-transform: capitalize;
font: 500 11px Tahoma, Arial, sans-serif;
font-weight: normal;
color:#000;
border:1px solid #000;
}
ul li a:hover {
color: #FF8000;
background:green;
}

[pbm_soy]

تگی که display:inline; دارد نمیتواند خصوصیات height , width و margin عمودی داشته باشد اگر داشته باشد هم تاثیری نخواهد گذاشت
تگی که display:inline-block; داشته باشد سه خصوصیت فوق را میتواند داشته باشد
همیشه به مقدار پیش فرض display در تگها دقت کنید مثلا تگ em و یا span پیش فرض inline است و تگ p و یا div پیش فرض inline-block است و اگر میخواهید به em ارتفاع بدید باید inline-block را به آن ست کنید
یک مثال تصویری در لینک زیر وجود دارد
http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block

[pbm_soy]

در ضمن اگر سرچ میکردید هم تو اینترنت حتی در سایتهای فارسی هم مطالب تو این زمینه خیلی زیاد بود

http://webgoo.ir/145/%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-display-%D8%AF%D8%B1-css

http://fa.learnlayout.com/display.html

http://onliner.ir/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF-%D9%85%D8%B4%D8%AE%D8%B5%D9%87-display-%D8%AF%D8%B1-css/

http://pars-soft.ir/index.aspx?Article=Display-properties-of-the-Cursor-Display-Visibility

http://sitedesign-co.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/%D9%88%DB%8C%DA%98%DA%AF%DB%8C-cursor-visibility-display-%D8%AF%D8%B1-css

[fr_sdgh]

خوب من در کد های بالا display: table رو از تگ ul میگیرم و بهش text-align: center میدم اوکی میشه ولی من نفهمیدم چرا باید از display توی ul استفاده کنیم، ما که به li ها display:inline دادیم !!! و چرا وقتی ul ما display:table هست وسط قرار میگیره ولی وقتی display:inline-block هست میره گوشه !!!

[sinoser]

خب display های block , inline-block , table و از این قبل دو بعدی هستن یعنی عین یک برگه A4 طول و عرض دارن ولی inline نچ. طول و عرض مستقل ندارن و از پدرشون ارث می برن. توی این مثال اگر ul رو inline کنی اون وقت طول و عرض بستگی داره به div.menu که چی باشه . هر چی بدی ul هم همون میشه و نکته همینجاس. inline یعنی خطی و خط هم عملا طول و عرض نداره پس li ها سرگردون می مونن و در بُعد اولین پدری که دو بعدی باشه که تو اینجا .menu هست قرار می گیرن حالا اگر تو بری divرو هم inline کنی بنده خدا li ها یتیم میشن و از body پیوری می کنن و در اون جایگاهشون رو تثبیت می کنن و عملا div و ul بی بخاطر میشن (عین پدرای معتاد :لبخند: )