تنظیم یک لیست به شکل یک باکس

[skylove]

با سلام دوستان
من میخوام یک باکس شبیه به این عکس با HTML و CSS درست کنم، (باکسی که زیر عنوان size نوشته شده) اما نمیدونم چرا نامنظم هستش؟ کدوم قسمت رو باید اصلاح کنم و یا چه کدی رو اضافه کنم؟
و سوال دومم اینکه میخوام دو دکمه ی پایین کاملا به هم بچسبن و همینطور به پایین کادر، که با این هم مشکل دارم. اگه ممکنه راهنمایی کنید.
ممنونم
کد css مربوط به باکس:
ul#size-list{
width: 80px;
list-style-type: none;
border: 1px solid gray;
text-align: center;
}
ul#size-list li{
display: inline;
border-right: 1px solid gray;
display: inline-block;
}

[skylove]

و همینطور کدی که برای دکمه های پایین نوشتم بصئرت زیر هستش:
کدهای بخش HTML:

<div class="footer">
<button class="add-cart">Add to cart</button>
<button class="add-wishlist">Add to Wishlist</button>
</div>


کدهای قسمت CSS:

.footer{
height: 40px;
width: 100%;
position: absolute;
}
.add-cart{
width: 370px;
padding:7px;
color: white;
background-color: black;
display: inline-block;
text-align: center;
margin-bottom: 0;
border:none;
}
.add-wishlist{
width: 370px;
padding:7px;
color: black;
display: inline;
text-align: center;
margin: 0;
border:none;
}

[elias102]

من میخوام یک باکس شبیه به این عکس با HTML و CSS درست کنم، (باکسی که زیر عنوان size نوشته شده) اما نمیدونم چرا نامنظم هستش؟ کدوم قسمت رو باید اصلاح کنم و یا چه کدی رو اضافه کنم؟

سلام دوست عزیز؛
من کد css شما رو به این صورت تغییر دادم و مشکل حل شد :

ul#size-list{border: 1px solid black;
padding:0;
display: inline;
text-align: center;
}


#size-list li {
display: inline-block;
border-right: 1px solid gray;
width: 5%;
}




کد رو بررسی بفرمایین .
سوال دومتون رو هم مطالعه کنم اگه کمکی از دستم بر اومد دریغ نمیکنم .
موفق باشین .

[elias102]

و سوال دومم اینکه میخوام دو دکمه ی پایین کاملا به هم بچسبن و همینطور به پایین کادر، که با این هم مشکل دارم. اگه ممکنه راهنمایی کنید.
برای قرار گرفتن این دو button در انتهای کادر یا صفحه ، کد زیر رو در آخر کدهای .footer که نوشتین قرار بدین :
bottom: 0;
و برای چسبیدن button ها به همدیگه کد زیر رو در آخر کدهای .add-cart
و .add-wishlist قرار بدین :
float: left;
امیدوارم که تونسته باشم جواب بدرد بخوری داده باشم .
موفق باشین ، یاعلی.

[skylove]

خیلی ممنونم از جوابی که دادید، انجامش دادم و مشکل کادر حل شد.
فقط قسمت دوم مشکل فاصله بینشون برطرف شد، ولی فقط از کنار سمت راست فاصله داره، و همینطور bottom:0; رو نوشتم از کادر سفید خیلی پایینتر میره.

[elias102]

فقط قسمت دوم مشکل فاصله بینشون برطرف شد، ولی فقط از کنار سمت راست فاصله داره، و همینطور bottom:0; رو نوشتم از کادر سفید خیلی پایینتر میره.
عذر میخوام بنده چون دیدم که به کادر ;position : absolute دادین فکر کردم حتما به کادر اولیتون هم position : relative; دادین پس اگه هنوز این کار رو انجام ندادین انجامش بدین تا موقعیت کادر دوم نسبت به کادر اول سنجیده بشه نه کل صفحه .
موفق باشین .

[skylove]

خیلی ممنونم، درست شد:لبخندساده: