主页 / 问题 / 863929
Accepted
Nulliza
Asked:2020-08-03 18:30:11 +0000 UTC2020-08-03 18:30:11 +0000 UTC

如何改写代码，让“订阅订阅”项在缩放屏幕时不向右移动？

  • 772

body {  
  background-color: #f2f2f2;
  font-family: "Futura PT", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* для корректного отображения текста на всех экранах*/
  -webkit-overflow-scrolling: touch;
  /*для нормального скроллинга*/
}
.header-top {
   height:40px;
    background: #ffffff;
    line-height:40px;    
}    
nav {
  display:flex;
  border-bottom:1px solid #ccc;
  background-color: #ffffff;
  width: 100%;
  height: 50%;  
}
nav .nav-title {
  color:#686868;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 17px;
  margin-left: 68px; 
  margin-right: 70px;
  margin-top: 22px;
}
nav .navigation {
  list-style: none;
  display:flex;
  color: gray;
  flex-grow:1;
}
nav .navigation li {
   text-align: center;
   font-size: 16px;
   /*странно, но нижняя тень работает только так, если поставить ; она будет отображаться некорректно*/   
   /*margin-bottom: 11px;
   margin-top: 25px;*/
   margin: 0; 
   padding: 0;
         
}

nav .navigation li.selectable:hover {
box-shadow:0 -2px 0 0 #1c76bc inset;
}

nav .navigation li.left {
    flex-grow:1;
    text-align:right;
    margin-right: 100px;
}
/* Подписаться на розсылку*/

nav .navigation a{
  color: #686868;
  text-decoration: none;
  text-align: center;
  padding: 25px 19px;  
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>domjuristablog2</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	
	<header>
		<div class="header-top">
    	Header top
		</div>
	</header>
    		<nav>
  			<div class="nav-title">Блог</div>
  			<ul class="navigation">
    			<li class="selectable"><a href="#">Для бізнесу</a></li>
    			<li class="selectable"><a href="#">Для юристів</a></li>
    			<li class="left"><a href="#">Підписатися на розсилку</a></li>
  			</ul>
		</nav>
    </body>
</html>

html

3 个回答

  1. Best Answer

    用于 nav .navigation{...} 属性

    flex-wrap: wrap;

    然后所有不适合屏幕的内容将移动到下一行（当然是在 flex 内）。然后，通过@media(...){...}，为不同版本的屏幕调整样式，使其看起来有点人性化。

    • 2

  2. 删除属性flex-grow: 1；

    nav .navigation li.left { flex-grow: 1; ...

    • 0

  3. 我找到了一个更优雅的解决方案，并将“订阅新闻通讯”放在一个单独的 div 中并为其设置坐标。

    • 0

相关问题