请问这个问题( 网页设计)怎么解决，问题图片在下面，我想把文字放到导航栏的下面那一块地方（导航栏下面任意地方），还要放照片在导航栏下面，现在的问题是放文字还是图片都在导航栏右边，现在怎么解决啊求解?谢谢
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>房东的兔</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/fedback.css"> </head> <body> <!--导航栏--> <div id="nav-1"> <ul class="nav"> <li class="slide1"></li> <li class="slide2"></li> <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="index注册.html">登录注册</a></li> </ul> </div> <script src='js/jquery.min.js'></script> <script src="js/script.js"></script> <!--右下角留言表单--> <div class="feedback"> <h3 class="feedbackHeader eMailIco"> 遇到问题？请给我们留言 </h3> <span class="closeBtn"></span> <form class="feedbackForm" action=""> <p class="tips">请填写您的邮箱地址，我们将回复您的电子邮件</p> <div class="line"> <textarea name="" placeholder="*请填写留言内容"></textarea> </div> <div class="line"> <input type="text" name="" placeholder="请填写姓名"> </div> <div class="line"> <input type="text" name="" placeholder="*请填写邮箱"> </div> <input class="btn" type="submit" value="发送"> </form> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/fedback.js"></script> <!--大图 --> <div class="color"> <p>我的你的都是我们的吧vb地方v下 下知道v感到不舒服收到VS地方都是擦方法</p> </div>css下面
*{margin:0;padding:0;list-style-type:none;} #nav-1{ height: 80px; } #nav-1 .nav { position: relative; border: none; border-radius: 10em; display: flex; list-style: none; background: #f5f5f5; box-shadow: 20px 40px 50px #00000044; padding: 10px; } #nav-1 .nav li { margin: 0px; } #nav-1 .nav li a { position: relative; padding: 0.6em 2em; font-size: 18px; border: none; color: #333; display: inline-block; text-decoration: none; z-index: 3; } #nav-1 .slide1, #nav-1 .slide2 { position: absolute; display: inline-block; height: 3em; border-radius: 10em; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1.05); } #nav-1 .nav .slide1 { background-color: yellowgreen; z-index: 2; } #nav-1 .nav .slide2 { opacity: 0; background: #fff; border: 1px solid #8ab9ff; z-index: 1; } .color{ padding-top: 150px; margin: 0px; } .squeeze { transition: all 1.5s; -webkit-transform: scale(0.9); transform: scale(0.9); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { display: flex; justify-content: center; background-color: #e0e0e0; font-family: Montserrat, sans-serif; line-height: 1.5; background: linear-gradient(160deg, #4567b2 20%, #8ab9ff 20%, #8ab9ff 80%, #4567b2 80%); }