Question

即使观看者决定在浏览器中缩放文本，我希望文本保持在DIV范围内。现在，文本只是在DIV之外。我确定我可能会丢失一些代码或搞砸了。

以下是代码：

＆＃13;

.footer {
        height: 110px;
        width: 1024px;
        background-color: #000000;
        margin: auto;
        -webkit-box-shadow: 1px 2px 20px 0 #000000;
        -moz-box-shadow: 1px 2px 20px 0 #000000;
        box-shadow: 1px 2px 20px 0 #000000;
        font-family: 'Jura', serif;
        font-size: 20px;
        color: #ffffff;
    }

＆＃13;

<div class="footer">

        <span style="position:relative;top:15px;left:0px">
            <a href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a>
        </span>

        <span style="position:relative;top:15px;left:300px">
            © 2017 diversedesigning.com
        </span>

    </div>

＆＃13;

Answer 1

尝试使用父div的跨度和相对位置进行绝对定位。

＆＃13;

.footer {
height:110px;
width:100%;
background-color:#000000; 
margin: auto;
-webkit-box-shadow: 1px 2px 20px 0 #000000;
-moz-box-shadow: 1px 2px 20px 0 #000000;
box-shadow: 1px 2px 20px 0 #000000;
font-family: 'Jura', serif;
font-size: 20px;
color:#ffffff;
position:relative;
}

.footer span:first-child
{
  position:absolute;
  top:15px;
  left:0px
}

.footer span:last-child
{
  position:absolute;
  top:15px;
  right:0px
}

＆＃13;

<div class="footer">

<span ><a  href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a></span>

<span>© 2017 diversedesigning.com</span>

</div>

＆＃13;

Answer 2

不太确定你问的是什么，所以我已经添加了两个可能的芒果

如果您希望它始终保持在div的屏幕上

我相信这是你正在寻找的那个，如果你想让div在调整屏幕大小时保持在同一个位置，你需要设置你的div，这是父元素相对于亲戚的位置并且作为跨度位置的子元素必须是绝对的，如此

<强> HTML

<span style="position:absolute;top:15px;left:5px"><a          href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a></span>

<span style="position:absolute;top:50px;left:300px">© 2017     diversedesigning.com</span>

</div>

<强> CSS

.footer {
  position:relative;
  height: 110px;
  width: 1024px;
  background-color: #000000;
  margin: auto;
  -webkit-box-shadow: 1px 2px 20px 0 #000000;
  -moz-box-shadow: 1px 2px 20px 0 #000000;
  box-shadow: 1px 2px 20px 0 #000000;
  font-family: 'Jura', serif;
  font-size: 20px;
  color: #ffffff;
}

稍微超出div的文字？

我不太清楚为什么它会像这样剪辑边缘，但你可以在你的页脚div中放一些填充物以防止它们远离边缘

我刚将其添加到您的 css 中。

.footer {
height:110px;
width:1024px;
background-color:#000000; 
margin: auto;
-webkit-box-shadow: 1px 2px 20px 0 #000000;
-moz-box-shadow: 1px 2px 20px 0 #000000;
box-shadow: 1px 2px 20px 0 #000000;
font-family: 'Jura', serif;
font-size: 20px;
color:#ffffff;
padding:15px;
}

您也可以只更改第一个跨度的左侧值以使其远离边缘

<span style="position:relative;top:15px;left:5px"><a href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a></span>

希望这有任何帮助！

JSFiddle链接： https://jsfiddle.net/gaL494yf/

Answer 3

您可以简单地使用像素值或视图-宽度在div中添加填充。

imagepullsecret

.footer {
        height: 110px;
        width: 1024px;
        background-color: #000000;
        margin: auto;
        -webkit-box-shadow: 1px 2px 20px 0 #000000;
        -moz-box-shadow: 1px 2px 20px 0 #000000;
        box-shadow: 1px 2px 20px 0 #000000;
        font-family: 'Jura', serif;
        font-size: 20px;
        color: #ffffff;
        padding-left: 15px;
    }

文字不会留在DIV内

3 个答案: