Как добавить горизонтальную линию с двумя словами на той же строке, что и ниже?
Как добавить горизонтальную линию с двумя словами на той же строке, что и ниже?
Я пытаюсь добавить горизонтальную линию с двумя словами под изображением, но это не дает мне нужного результата
скрипка, которая показывает, что я пытаюсь сделать следующим образом :
Как показать два слова (это тест1-это тест2) с горизонтальной линией на одной строке
мой желаемый результат мне нужно на самом деле сделать как показано на рисунке ниже :
Мне нужен дизайн только красной части под изображением I(слайд-2.png)
моя проблема на части под изображением slide-2.png, которая включает в себя два слова с горизонтальной линией
и части под двумя словами в качестве отображения изображения
Общий доступ к файлам и их хранение упрощены[^]
Что я уже пробовал:
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
}
.nav {
display:flex;
border-top:5px solid #ccc;
align-items:flex-start;
flex-wrap:wrap;
}
.nav ul {
padding: 0;
margin:5;
list-style: none;
display:flex;
flex:1 0 0;
}
.nav li {
line-height:1.4;
flex:1 0 0;
}
.nav a {
display: inline-block;
padding: 8px 25px;
color: #000;
text-decoration:none;
}
.nav a:hover, .nav a.active {
color: orange;
border-top:3px solid orange;
padding-top:5px;
}
.logo {
margin-left:auto;
order:2;
}
.logo img {
display:block;
margin:auto;
max-width:300px;
width:100%;
height:auto;
}
@media screen and (max-width:800px){
.logo{order:0;flex:1 0 100%;margin:0;}
}
@media screen and (max-width:499px){
.nav ul{flex-wrap:wrap;}
.nav li{flex:1 0 100%;}
.nav a{display:block;}
}
.bg
{
width: 100%;
height:20%;
padding-right: 2px;
}
h2 {
display: flex;
align-items: center;
justify-content: center;
}
h2 span {
background: #fff;
margin: 0 15px;
}
h2:before,
h2:after {
background: black;
height: 2px;
flex: 1;
content: '';
}
h2.left:after {
background: none;
}
h2.right:before {
background: none;
}
</style>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alsafwa</title>
</head>
<body>
<nav class="nav">
<div class="logo"><img src="alsafwa-logo.png" alt ="logo" width="300px" height="200px"> </div>
<ul>
<li><a class="active" href = "#">الرئيسيه </a> </li>
<li><a href = "#">من نحن </a> </li>
<li><a href ="#"> خدماتنا </a> </li>
<li><a href ="#"> اعمالنا </a> </li>
<li><a href ="#"> اخر الاخبار </a> </li>
<li><a href ="#"> اتصل بنا </a> </li>
</ul>
</nav>
<nav class="nav">
<div class="bg"><img src="slide-2.png" alt ="Advlogo" > </div>
</nav>
<table>
<tr>
<td>
<h2 class="left"><span>THIS IS A TEST1</span></h2>
</td>
<td>
<h2 class="left"><span>THIS IS A TEST2</span></h2>
</td>
</tr>
</table>
<p>
نحن احدى وكالات الدعاية والاعلان ذات سمة خاصة فنحن نتناول كل اعمالنا على انها لوحات فنية مقتناه للمساهمة فى رفع الذوق العام فى مجال الدعاية والاعلان.
نستطيع ان نقدم لعملائنا المزيد و المزيد من الابتكارات بإسلوب عصرى مبتكر ذو سمة فنية راقية.
لدينا فريق متكامل من الفنيين لتصنيع جميع انواع اللافتات وجميع الخامات تصنع فى ورشتنا الخاصة.
</p>
<ul>
<li>
خبره 20 عاما في مجال الدعاية والإعلان واعمال الديكور.
</li>
<li>
فريق متكامل من الفنيين المحترفين لتلبيه مختلف الاحتياجات.
</li>
<li>
جميع الخامات يتم تصنيعها داخل ورشنا وتحت اشراف المتخصصين.
</li>
</ul>
</body>
</html>