设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 一个span为何不能设置MARGIN-RIGHT
返回列表 发新帖
查看: 3673|回复: 5

[已解决]一个span为何不能设置MARGIN-RIGHT

[复制链接]
sukiwhip
发表于 2019-5-28 18:32:27 | 显示全部楼层    本楼为最佳答案   
本帖最后由 sukiwhip 于 2019-5-28 18:35 编辑
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0px;
  10.             padding: 0px;
  11.         }
  12.         
  13.         .page-left {
  14.             min-height: 1000px;
  15.             width: 60%;
  16.             height: 100%;
  17.             background-color: #22c3aa;
  18.             float: left;
  19.             transition: background-color 1s;
  20.         }
  21.         
  22.         .left-dis {
  23.             text-align: right;
  24.             margin-right: 10px;
  25.             margin-bottom: 20px;
  26.             color: white;
  27.             font-size: 50px;
  28.             font-weight: 500px;
  29.             transition: color 1s;
  30.         }
  31.         
  32.         .left-title {
  33.             margin-right: 20px;
  34.             height: 200px;
  35.             width: auto;
  36.             font-size: 20px;
  37.             display: block
  38.         }
  39.         
  40.         .ul-left {
  41.             list-style: none;
  42.             height: 100%;
  43.             width: 70%;
  44.         }
  45.         
  46.         .page-right {
  47.             min-height: 1000px;
  48.             width: 30%;
  49.             height: 100%;
  50.             background-color: white;
  51.             transition: background-color 1s;
  52.             float: left;
  53.         }
  54.         
  55.         .right-dis {
  56.             font-size: 50px;
  57.             margin-bottom: 20px;
  58.             font-weight: 500px;
  59.             margin-left: 5px;
  60.             color: #22c3aa;
  61.             transition: color 1s;
  62.         }
  63.         
  64.         .right-title {
  65.             display: inline-block;
  66.             font-size: 20px;
  67.         }
  68.         
  69.         .ul-right {
  70.             list-style: none;
  71.             height: 100%;
  72.             width: 30%;
  73.         }
  74.         
  75.         .page-left:hover {
  76.             background-color: white;
  77.         }
  78.         
  79.         .page-left:hover .left-dis {
  80.             color: #22c3aa;
  81.         }
  82.         
  83.         .page-left:hover+.page-right {
  84.             background-color: #22c3aa
  85.         }
  86.         
  87.         .page-left:hover+.page-right>.right-dis {
  88.             color: white
  89.         }
  90.     </style>
  91. </head>

  93. <body>
  94.     <div class="page-left">
  95.         <p class="left-dis">小树苗的</p>
  96.         <span class="left-dis left-title">
  97.                         <!--就是这里的span,设置了display和宽高,但是css中的margin-right为何会在父元素标签范围以外-->
  98.                                 <p>坦格利安家族的"风暴降生"</p>
  99.                                 <p>铁王座</p>
  100.                                 <p>安达尔人和先民的</p>
  101.                                 <p>七大王国守护者</p>
  102.                                 <p>大草海上的</p>
  103.                                 <p>不焚者镣铐</p>
  104.                         </span>
  105.         <ul class="ul-left">
  106.             <li>左</li>
  107.             <li>左</li>
  108.             <li>左</li>
  109.             <li>左</li>
  110.         </ul>
  111.     </div>
  112.     <div class="page-right">
  113.         <p class="right-dis">成长相册</p>
  114.         <span class="right-dis right-title">
  115.                                 <p>Daenerys</p>
  116.                                 <p>Lawful hei</p>
  117.                                 <p>Queen</p>
  118.                                 <p>Mother of Dragen</p>
  119.                                 <p>Khaleesi</p>
  120.                                 <p>Breaker</p>
  121.                         </span>
  122.         <ul class="ul-right">
  123.             <li>右边</li>
  124.             <li>右边</li>
  125.             <li>右边</li>
  126.             <li>右边</li>
  127.             <li>右边</li>
  128.         </ul>
  129.     </div>
  130. </body>

  132. </html>
复制代码

是想要这个效果？
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sukiwhip
发表于 2019-5-29 10:33:46 | 显示全部楼层
sxfxtf 发表于 2019-5-28 21:05
是的,多谢多谢,我看到哪里的问题了.我竟然忘记了auto这个值,蠢哭了

另外，如果你的浏览器宽度小于一定的范围，你的第一行会换行，导致左右不对称，当然，很少人会这样缩小浏览器。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-10-8 04:37

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表