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

sxfxtf · 发表于 2019-5-27 21:57:20

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 sxfxtf 于 2019-5-27 22:00 编辑

没办法传附件，代码附上
问题就是84行写的
我就是要把下面的文字通过margin-right设置边距
坦格利安家族的"风暴降生"
铁王座
安达尔人和先民的
七大王国守护者
大草海上的
不焚者镣铐

但是span标签,设置了display和宽高以后,但是css中的margin-right为何会在父元素标签范围以外,从而导致视觉上margin-rigth失效的感觉??????

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        *{
                                margin: 0px;
                                padding: 0px;
                        }
                        .page-left{
                                min-height: 1000px;
                                width: 70%;
                                height: 100%;
                                background-color: #22c3aa;
                                float: left;
                                transition: background-color 1s;
                        }
                        .left-dis{
                                text-align: right;
                                margin-right:10px;
                                margin-bottom: 20px;
                                color: white;
                                font-size: 50px;
                                font-weight: 500px;
                                transition: color 1s;
                        }
                        .left-title{
                                margin-right: 20px;
                                height: 200px;
                                width: 1332px;
                                font-size: 20px;
                                display:block
                        }
                        .ul-left{
                                list-style: none;
                                height: 100%;
                                width: 70%;
                        }        
                        .page-right{
                                min-height: 1000px;
                                width: 30%;
                                height: 100%;
                                background-color: white;
                                transition: background-color 1s;
                                float: left;
                        }
                        .right-dis {
                                font-size: 50px;
                                margin-bottom: 20px;
                                font-weight: 500px;
                                margin-left:5px;
                                color: #22c3aa;
                                transition: color 1s;
                        }
                        .right-title{
                                display: inline-block;
                                font-size: 20px;
                        }
                        .ul-right{
                                list-style: none;
                                height: 100%;
                                width: 30%;
                        }
                        .page-left:hover{
                                background-color: white;
                        }
                        .page-left:hover .left-dis{
                                color: #22c3aa;
                        }
                        .page-left:hover+.page-right{
                                background-color:#22c3aa
                        }
                        .page-left:hover+.page-right>.right-dis{
                                color: white
                        }
                        
                </style>
        </head>
        <body>
                <div class="page-left">
                        <p class="left-dis">小树苗的</p>
                        <span class="left-dis left-title">
                        <!就是这里的span,设置了display和宽高,但是css中的margin-right为何会在父元素标签范围以外-->
                                <p>坦格利安家族的"风暴降生"</p>
                                <p>铁王座</p>
                                <p>安达尔人和先民的</p>
                                <p>七大王国守护者</p>
                                <p>大草海上的</p>
                                <p>不焚者镣铐</p>
                        </span>
                        <ul class="ul-left">
                                <li>左</li>
                                <li>左</li>
                                <li>左</li>
                                <li>左</li>
                        </ul>
                </div>
                <div class="page-right">
                        <p class="right-dis">成长相册</p>
                        <span class="right-dis right-title">
                                <p>Daenerys</p>
                                <p>Lawful hei</p>
                                <p>Queen</p>
                                <p>Mother of Dragen</p>
                                <p>Khaleesi</p>
                                <p>Breaker</p>
                        </span>
                        <ul class="ul-right">
                                <li>右边</li>
                                <li>右边</li>
                                <li>右边</li>
                                <li>右边</li>
                                <li>右边</li>
                        </ul>
                </div>
        </body>
</html>

最佳答案

月排行榜 / 总排行榜

sukiwhip

2019-5-28 18:32:27

本帖最后由 sukiwhip 于 2019-5-28 18:35 编辑

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .page-left {
            min-height: 1000px;
            width: 60%;
            height: 100%;
            background-color: #22c3aa;
            float: left;
            transition: background-color 1s;
        }
        
        .left-dis {
            text-align: right;
            margin-right: 10px;
            margin-bottom: 20px;
            color: white;
            font-size: 50px;
            font-weight: 500px;
            transition: color 1s;
        }
        
        .left-title {
            margin-right: 20px;
            height: 200px;
            width: auto;
            font-size: 20px;
            display: block
        }
        
        .ul-left {
            list-style: none;
            height: 100%;
            width: 70%;
        }
        
        .page-right {
            min-height: 1000px;
            width: 30%;
            height: 100%;
            background-color: white;
            transition: background-color 1s;
            float: left;
        }
        
        .right-dis {
            font-size: 50px;
            margin-bottom: 20px;
            font-weight: 500px;
            margin-left: 5px;
            color: #22c3aa;
            transition: color 1s;
        }
        
        .right-title {
            display: inline-block;
            font-size: 20px;
        }
        
        .ul-right {
            list-style: none;
            height: 100%;
            width: 30%;
        }
        
        .page-left:hover {
            background-color: white;
        }
        
        .page-left:hover .left-dis {
            color: #22c3aa;
        }
        
        .page-left:hover+.page-right {
            background-color: #22c3aa
        }
        
        .page-left:hover+.page-right>.right-dis {
            color: white
        }
    </style>
</head>

<body>
    <div class="page-left">
        <p class="left-dis">小树苗的</p>
        <span class="left-dis left-title">
                        <!--就是这里的span,设置了display和宽高,但是css中的margin-right为何会在父元素标签范围以外-->
                                <p>坦格利安家族的"风暴降生"</p>
                                <p>铁王座</p>
                                <p>安达尔人和先民的</p>
                                <p>七大王国守护者</p>
                                <p>大草海上的</p>
                                <p>不焚者镣铐</p>
                        </span>
        <ul class="ul-left">
            <li>左</li>
            <li>左</li>
            <li>左</li>
            <li>左</li>
        </ul>
    </div>
    <div class="page-right">
        <p class="right-dis">成长相册</p>
        <span class="right-dis right-title">
                                <p>Daenerys</p>
                                <p>Lawful hei</p>
                                <p>Queen</p>
                                <p>Mother of Dragen</p>
                                <p>Khaleesi</p>
                                <p>Breaker</p>
                        </span>
        <ul class="ul-right">
            <li>右边</li>
            <li>右边</li>
            <li>右边</li>
            <li>右边</li>
            <li>右边</li>
        </ul>
    </div>
</body>

</html>

是想要这个效果？

跳转到最佳答案楼层

不二如是 · 发表于 2019-5-27 22:56:47

1、页面看着效果挺好的，鱼油准确描述下问题：

sxfxtf · 发表于 2019-5-28 09:49:41

不二如是发表于 2019-5-27 22:56
1、页面看着效果挺好的，鱼油准确描述下问题：

不二学长.你好
在小树苗的下面有一段p标签,他们的父标签是span.
span是行内元素,所以我设置了display属性和宽高.想设置右边距(margin-right).
把版面白色和青色的那条分界线和p标签产生距离.
但是似乎无效.不知道什么原因

sukiwhip · 发表于 2019-5-28 18:32:27

这个最佳答案由 sukiwhip 给出，感谢 sukiwhip 的回答。

单击隐藏图章

本帖最后由 sukiwhip 于 2019-5-28 18:35 编辑

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .page-left {
            min-height: 1000px;
            width: 60%;
            height: 100%;
            background-color: #22c3aa;
            float: left;
            transition: background-color 1s;
        }
        
        .left-dis {
            text-align: right;
            margin-right: 10px;
            margin-bottom: 20px;
            color: white;
            font-size: 50px;
            font-weight: 500px;
            transition: color 1s;
        }
        
        .left-title {
            margin-right: 20px;
            height: 200px;
            width: auto;
            font-size: 20px;
            display: block
        }
        
        .ul-left {
            list-style: none;
            height: 100%;
            width: 70%;
        }
        
        .page-right {
            min-height: 1000px;
            width: 30%;
            height: 100%;
            background-color: white;
            transition: background-color 1s;
            float: left;
        }
        
        .right-dis {
            font-size: 50px;
            margin-bottom: 20px;
            font-weight: 500px;
            margin-left: 5px;
            color: #22c3aa;
            transition: color 1s;
        }
        
        .right-title {
            display: inline-block;
            font-size: 20px;
        }
        
        .ul-right {
            list-style: none;
            height: 100%;
            width: 30%;
        }
        
        .page-left:hover {
            background-color: white;
        }
        
        .page-left:hover .left-dis {
            color: #22c3aa;
        }
        
        .page-left:hover+.page-right {
            background-color: #22c3aa
        }
        
        .page-left:hover+.page-right>.right-dis {
            color: white
        }
    </style>
</head>

<body>
    <div class="page-left">
        <p class="left-dis">小树苗的</p>
        <span class="left-dis left-title">
                        <!--就是这里的span,设置了display和宽高,但是css中的margin-right为何会在父元素标签范围以外-->
                                <p>坦格利安家族的"风暴降生"</p>
                                <p>铁王座</p>
                                <p>安达尔人和先民的</p>
                                <p>七大王国守护者</p>
                                <p>大草海上的</p>
                                <p>不焚者镣铐</p>
                        </span>
        <ul class="ul-left">
            <li>左</li>
            <li>左</li>
            <li>左</li>
            <li>左</li>
        </ul>
    </div>
    <div class="page-right">
        <p class="right-dis">成长相册</p>
        <span class="right-dis right-title">
                                <p>Daenerys</p>
                                <p>Lawful hei</p>
                                <p>Queen</p>
                                <p>Mother of Dragen</p>
                                <p>Khaleesi</p>
                                <p>Breaker</p>
                        </span>
        <ul class="ul-right">
            <li>右边</li>
            <li>右边</li>
            <li>右边</li>
            <li>右边</li>
            <li>右边</li>
        </ul>
    </div>
</body>

</html>

是想要这个效果？

sxfxtf · 发表于 2019-5-28 21:05:10

sukiwhip 发表于 2019-5-28 18:32
是想要这个效果？

是的,多谢多谢,我看到哪里的问题了.我竟然忘记了auto这个值,蠢哭了

sukiwhip · 发表于 2019-5-29 10:33:46

sxfxtf 发表于 2019-5-28 21:05
是的,多谢多谢,我看到哪里的问题了.我竟然忘记了auto这个值,蠢哭了

另外，如果你的浏览器宽度小于一定的范围，你的第一行会换行，导致左右不对称，当然，很少人会这样缩小浏览器。

账号		自动登录	找回密码
密码			立即注册