كيفية جعل القائمة والمثلث الاحمر تحت الخطوط مباشرة

من الأفضل إرفاق مجلد المشروع بشكل مضغوط هنا ورفعه من أجل مساعدتك لحل المشكلة، من خلال الضغط على على اسحب الملفات إلى هنا.

هي الملف كامل 

all.css all.min.css leon.css index.html

قمت بحذف عنصر div الذي يحتوي على كلاس container وتطبيق خاصية flex على عنصر div بكلاس header ثم تنسيق العناصر من خلال   justify-content: space-between كالتالي:

.header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

ثم استخدام خاصية position من أجل وضع القائمة أسفل الأيقونة كالتالي:

.links {
  position: relative;
}
.list {
  position: absolute;
  right: 0;
  top: 29%;
}

وإليك المشروع بعد التعديل:

project.rar

بشكل عام، يوجد طريقة جد فعالة للتحكم بمكان عنصر تريده بحرية، ويمكنك تطبيقها في مثالك:

• قم بتعيين هذه التنسيق في العنصر الاب (الذي يحوي العنصر الابن الذي تريد تحريكه كما تريد):

.container {
	position: "relative";
}

• عين هذا التنسيق للعنصر الابن (الذي تريد تحريكه):

.child {
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom:0;
}

هذه التنسيقات تسمح للعنصر الابن أن يسبح داخل العنصر الاب دون قيود، ويمكنك التحكم في الخواص top, left, right, bottom واختيار عدد معين من البكسلات لتحديد البعد عن كل جهة.
أي أنه استخدام top: 10px تعني أن الابن يبعد عن الاب من الجهة العلوية بمقدار 10px.