position怎么在div里面的一个text里面的图片？
[英]How position a text inside div inside image?
问题描述
I would like to know where I made a mistake or where should I add something?
我想知道我在哪里犯了错误或者我应该在哪里添加一些东西？
How to replace hours on third blue div on bottom to the right site?
如何将底部第三个蓝色 div 的小时数替换到正确的站点？ I was trying and shearching, but I can't see solution.我正在尝试和剪切，但我看不到解决方案。 Please let me know what to change and maybe also can You recomend me tutorial or articles with that case.请让我知道要更改的内容，也许您也可以向我推荐有关该案例的教程或文章。When I hover over a menu button, I'd like the text to turn white, but when i change it like color: #fff i doesn't work.
当我在菜单按钮上 hover 时，我希望文本变成白色，但是当我像颜色一样更改它时：#fff 我不起作用。
*{ padding: 0; margin: 0; box-sizing: border-box; }.header{ background-image:url(Images/bg.jpg); background-size: cover; background-position: center; font-family: sans-serif; width: 100%; min-height: 100vh; position: relative; }.menubar{ background: #fff; text-align: center; position: static; }.menubar ul{ display: inline-flex; list-style: none; color: black; }.menubar ul li{ width: auto; margin: 10px; padding: 15px; }.menubar ul li a{ text-decoration: none; color: black; }.active, .menubar ul li:hover{ background-color: #2E8BC0; border-radius: 2px; color: white; }.menubar.fas, .menubar.far{ margin-right: 8px; }.sub-menu-1{ display: none; }.menubar ul li:hover.sub-menu-1{ display: block; position: absolute; background: #040c7a; margin-top: 15px; margin-left: -15px; }.menubar ul li:hover.sub-menu-1 ul{ display: block; margin: 10px; }.menubar ul li:hover.sub-menu-1 ul li{ width: 100px; padding: 10px; border-bottom: 1px solid #fff; background: transparent; border-radius: 0; text-align: left; }.menubar ul li:hover.sub-menu-1 ul li:last-child{ border-bottom: none; }.menubar ul li:hover.sub-menu-1 ul li a:hover{ color: #278eff; }.fa-angle-right{ float: right; margin-left: 8px; }.class-menu-2{ display: none; }.hover-me:hover.class-menu-2{ position: absolute; display: block; margin-top: -40px; margin-left: 110px; background: #040c7a; }.row1{ color: white; display:flex; flex-wrap: wrap; justify-content: center; text-align: center; background-color: transparent; position: absolute; bottom: 10px; margin-left: auto; margin-right: auto; left: 0; right: 0; }.text-box1{ background-color: #2E8BC0; height: 150px; width: 300px; display: block; }.text-box1 h3{ padding: 10px; font-size:15px; text-align: left; margin-left: 20px; }.text-box1 p{ font-size: 25px; padding: 10px; text-align: left; margin-left: 20px; display: flex; }.text-box1 p2{ }.hero-btn{ display: inline-block; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 12px 34px; font-size: 13px; background: transparent; cursor: pointer; margin-left: -40px; margin-top: 10px; }.hero-btn:hover{ border: 1px solid white; background: white; transition: 1s; color: black; }.text-box1 pa{ color: white; }.text-box1 ul li{ font-size: 17px; margin-left: 20px; margin-right: 20px; display:flex; border-bottom: 1px dotted white; }.text-box1 ul li:last-child{ border-bottom: none; }.text-box1#first{ background-color: #0C2D48; }.text-box1#second{ background-color: #145DA0; }.text-box1#third background-color: #2E8BC0; }
<.DOCTYPE html> <html> <head> <title>Przychodnia</title> <link rel="stylesheet" href="PrzychodniaStyle.css"> </head> <body> <section class="header"> <div class="menubar"> <ul> <li class="active"><a href="#"><i class="fas fa-home"></i>Strona głowna</a></li> <li><a href="#"><i class="far fa-address-card"></i>Specjalistyka</a> <div class="sub-menu-1"> <ul> <li class="hover-me"> <a href="#">Menu</a><i class="fas fa-angle-right"></i> <div class="class-menu-2"> <ul> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> </ul> </div> </li> <li class="hover-me"> <a href="#">Menu</a><i class="fas fa-angle-right"></i> <div class="class-menu-2"> <ul> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> </ul> </div> </li> <li> <a href="#">Menu</a></li> </ul> </div> </li> <li><a href="#"><i class="fas fa-motorcycle"></i>Stomatologia</a> <div class="sub-menu-1"> <ul> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> </ul> </div></li> <li><a href="#"><i class="fas fa-toolbox"></i>Poradnie POZ</a></li> <li><a href="#"><i class="fas fa-graduation-cap"></i>Medycyna Pracy</a></li> <li><a href="#"><i class="fas fa-flag-checkered"></i>Diagnostyki</a></li> <li><a href="#"><i class="fas fa-user-plus"></i>Laboratorium</a></li> <li><a href="#"><i class="fas fa-user-plus"></i>O nas</a></li> <li><a href="#"><i class="fas fa-mobile-alt"></i>Kontakt</a></li> </ul> </div> <div class="row1"> <div class="text-box1" id="first"> <h3>Rejstracja telefoniczna</h3> <p>+1234567890</p> </div> <div class="text-box1" id="second"> <h3>Rejstracja elektroniczna</h3> <p class="e"><a href="#">przychodnia@eu:pl</a></p> <a href="" class="hero-btn">Formularz kontaktowy</a> </div> <div class="text-box1" id="third"> <h3>Godziny otwarcia</h3> <ul> <li><p1>Poniedziałek</p1><p2>6:00-18:00</p2></li> <li>Wtorek</li> <li>Środa</li> <li>Czwartek</li> <li>Piątek</li> </ul> </div> </div> </section> <section> <div class="text-box1"> Lolz </div> <a href="" class="hero-btn">Formularz kontaktowy</a> </section> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2022-01-19 14:13:13
- Add
justify-content: space-between( documentation ):添加justify-content: space-between( 文档):
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display: flex;
border-bottom: 1px dotted white;
justify-content: space-between;
}
.menubar ul li:hover a {
color: white;
}
.active, .menubar ul li:hover {
background-color: #2E8BC0;
border-radius: 2px;
}
*{ padding: 0; margin: 0; box-sizing: border-box; }.header{ background-image:url(Images/bg.jpg); background-size: cover; background-position: center; font-family: sans-serif; width: 100%; min-height: 100vh; position: relative; }.menubar{ background: #fff; text-align: center; position: static; }.menubar ul{ display: inline-flex; list-style: none; color: black; }.menubar ul li{ width: auto; margin: 10px; padding: 15px; }.menubar ul li a { text-decoration: none; color: black; }.menubar ul li:hover a { color: white; }.active, .menubar ul li:hover { background-color: #2E8BC0; border-radius: 2px; }.menubar.fas, .menubar.far{ margin-right: 8px; }.sub-menu-1{ display: none; }.menubar ul li:hover.sub-menu-1{ display: block; position: absolute; background: #040c7a; margin-top: 15px; margin-left: -15px; }.menubar ul li:hover.sub-menu-1 ul{ display: block; margin: 10px; }.menubar ul li:hover.sub-menu-1 ul li{ width: 100px; padding: 10px; border-bottom: 1px solid #fff; background: transparent; border-radius: 0; text-align: left; }.menubar ul li:hover.sub-menu-1 ul li:last-child{ border-bottom: none; }.menubar ul li:hover.sub-menu-1 ul li a:hover{ color: #278eff; }.fa-angle-right{ float: right; margin-left: 8px; }.class-menu-2{ display: none; }.hover-me:hover.class-menu-2{ position: absolute; display: block; margin-top: -40px; margin-left: 110px; background: #040c7a; }.row1{ color: white; display:flex; flex-wrap: wrap; justify-content: center; text-align: center; background-color: transparent; position: absolute; bottom: 10px; margin-left: auto; margin-right: auto; left: 0; right: 0; }.text-box1{ background-color: #2E8BC0; height: 150px; width: 300px; display: block; }.text-box1 h3{ padding: 10px; font-size:15px; text-align: left; margin-left: 20px; }.text-box1 p{ font-size: 25px; padding: 10px; text-align: left; margin-left: 20px; display: flex; }.text-box1 p2{ }.hero-btn{ display: inline-block; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 12px 34px; font-size: 13px; background: transparent; cursor: pointer; margin-left: -40px; margin-top: 10px; }.hero-btn:hover{ border: 1px solid white; background: white; transition: 1s; color: black; }.text-box1 pa{ color: white; }.text-box1 ul li{ font-size: 17px; margin-left: 20px; margin-right: 20px; display:flex; border-bottom: 1px dotted white; justify-content: space-between; }.text-box1 ul li:last-child{ border-bottom: none; }.text-box1#first{ background-color: #0C2D48; }.text-box1#second{ background-color: #145DA0; }.text-box1#third{ background-color: #2E8BC0; }
<.DOCTYPE html> <html> <head> <title>Przychodnia</title> <link rel="stylesheet" href="PrzychodniaStyle.css"> </head> <body> <section class="header"> <div class="menubar"> <ul> <li class="active"><a href="#"><i class="fas fa-home"></i>Strona głowna</a></li> <li><a href="#"><i class="far fa-address-card"></i>Specjalistyka</a> <div class="sub-menu-1"> <ul> <li class="hover-me"> <a href="#">Menu</a><i class="fas fa-angle-right"></i> <div class="class-menu-2"> <ul> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> </ul> </div> </li> <li class="hover-me"> <a href="#">Menu</a><i class="fas fa-angle-right"></i> <div class="class-menu-2"> <ul> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> </ul> </div> </li> <li> <a href="#">Menu</a></li> </ul> </div> </li> <li><a href="#"><i class="fas fa-motorcycle"></i>Stomatologia</a> <div class="sub-menu-1"> <ul> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> <li> <a href="#">Menu</a></li> </ul> </div></li> <li><a href="#"><i class="fas fa-toolbox"></i>Poradnie POZ</a></li> <li><a href="#"><i class="fas fa-graduation-cap"></i>Medycyna Pracy</a></li> <li><a href="#"><i class="fas fa-flag-checkered"></i>Diagnostyki</a></li> <li><a href="#"><i class="fas fa-user-plus"></i>Laboratorium</a></li> <li><a href="#"><i class="fas fa-user-plus"></i>O nas</a></li> <li><a href="#"><i class="fas fa-mobile-alt"></i>Kontakt</a></li> </ul> </div> <div class="row1"> <div class="text-box1" id="first"> <h3>Rejstracja telefoniczna</h3> <p>+1234567890</p> </div> <div class="text-box1" id="second"> <h3>Rejstracja elektroniczna</h3> <p class="e"><a href="#">przychodnia@eu:pl</a></p> <a href="" class="hero-btn">Formularz kontaktowy</a> </div> <div class="text-box1" id="third"> <h3>Godziny otwarcia</h3> <ul> <li><p1>Poniedziałek</p1><p2 class="hour">6:00-18:00</p2></li> <li>Wtorek</li> <li>Środa</li> <li>Czwartek</li> <li>Piątek</li> </ul> </div> </div> </section> <section> <div class="text-box1"> Lolz </div> <a href="" class="hero-btn">Formularz kontaktowy</a> </section> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将div放在智能手机图像中 - Position a div inside a smartphone image
如何在CSS中的图像内放置文本 - How to position text inside an image in css
如何在没有position：relative的div中裁剪/居中图像？ - How to crop/center an image inside a div without position:relative?
将鼠标悬停在div上的文本中，并在其中添加图像 - Hover with text on div with image inside
如何将我的文本放在位置：固定并在我的 div 内 - How to put my text on position:fixed and right inside of my div
如何在具有填充的div中获取文本的位置 - how to get the position of text inside div having padding
如何在特定位置的contenteditable div中添加/插入/更新文本？ - How to add / insert / update text inside contenteditable div at a particular position?
带图像的DIV中的文本分页 - Text pagination inside a DIV with image
修复div内的位置背景图像 - Fixed position background image inside div
DIV中的居中图像未给出预期位置 - Centering image inside DIV not giving expected position
相关标签