Question

我有一个CSS greybox :(当我说greybox时，我的意思是我创建的CSS框，我用灰色制作，你可以在下面看到。）

.navigation-div
{
    margin-top: 14px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
    padding: 0;
    color: #E3E3E3;
    background-color: #333;
}

此灰色框位于我的标题内，因为此灰色框比显示的大，所以它会超过标题图像，但不会显示。

有了这个：

<div class="navigation-bar">
    <a class="navigation-div-blur">
       <div class="navigation-div">
            <nav class="navigation">
                <a href="mailto:info@email.com"><img id="mailpicture" src="images/gmail.png"></a>
                <h1 id="mailtext">Mail Us</h1>
                <h1 id="nava">test</h1>
            </nav>
        </div>
    </a>
</div>

图片和Mail Us显示在正确的位置，没有暴露盒子。然而，当我把它暴露在盒子里时，测试。这是我背后的CSS

#mailtext
{
    margin-top: 20px;
    display: inline-block;
    margin-left: 1230px;
    font-size: 20px;
    color: white;
    font-style: italic;
}

#mailpicture
{
    display: inline-block;
    margin-top: 16px;
    float: right;
}

#nava
{
    font-size: 20px;
    color: white;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
    display: inline-block;
    margin-left: 500px;
}

您已经看到了CSS的框。

我想完成两件事中的任何一件：缩小CSS框并降低它，或让CSS正确定位测试以及更多元素以与Mail Us保持同一行。

注意：我已经尝试过测试margin-top：-pixels，这不会达到足够高并且在一段时间后停止上升。

这是测试的样子：这是没有测试的样子： enter image description here

你可以注意到第一个有一个更大的盒子在标题图片下方下降。没有考试的那个人留在了标题的图片中。

Answer 1

您的代码存在一些问题。首先，您不应将锚点（<a>）嵌套在其他锚元素中。使用边距来定位元素不是一个好主意，您已经尝试使用inline-block更改标头的默认block显示，同时浮动您的inline-block元素之一在右边。

为元素添加大边距会使元素占用更多空间，并且如果它不能与其他元素放在一行中，则将下一个内联元素移动到新行。

如果您想将所有菜单项置于右侧，可以使用text- align:right元素上的inline-block将其粘贴到右侧。

如果您希望邮件元素在右侧，您可能会坚持使用float:right，但将邮件元素放在nav

您可以在标题<a>中嵌套锚点<h1>，以在标题

中创建链接

<h1 id="mailtext">Mail Us <a href="mailto:info@email.com"><img id="mailpicture" src="images/gmail.png"></a></h1>

http://jsbin.com/kazocekoba/1/

.navigation-div
{
    margin-top: 14px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
    padding: 0;
    color: #E3E3E3;
    background-color: #333;
    
    text-align: right;
}
#mailtext
{
    margin-top: 20px;
    display: inline-block;
   /* margin-left: 1230px;*/
    font-size: 20px;
    color: white;
    font-style: italic;
}

#mailpicture
{
    display: inline-block;
    margin-top: 16px;
    float: right;
}

#nava
{
    font-size: 20px;
    color: white;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
    display: inline-block;
    /*margin-left: 500px;*/
}

/* use padding to separate your navigation elements */

.navigation > * {
  padding-left: 2em;
}

<div class="navigation-bar">
    <a class="navigation-div-blur">
       <div class="navigation-div">
            <nav class="navigation">
                <!-- --><a href="mailto:info@email.com"><img id="mailpicture" src="images/gmail.png"></a>
                <h1 id="mailtext">Mail Us</h1>
                <h1 id="nava">test</h1>
            </nav>
        </div>
    </a>
</div>

更好的解决方案http://jsbin.com/xunokaviju/1/

.navigation-div
{
    margin-top: 14px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
    padding: 0;
    color: #E3E3E3;
    background-color: #333;
    
    text-align: right;
}
#mailtext
{
    margin-top: 20px;
    display: inline-block;
   /* margin-left: 1230px;*/
    font-size: 20px;
    color: white;
    font-style: italic;
}

#mailpicture
{
    display: inline-block;
    margin-top: 16px;
    
    /*float: right;*/
}

#nava
{
    font-size: 20px;
    color: white;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
    display: inline-block;
    /*margin-left: 500px;*/
}

/* use padding to pad elements */

.navigation > * {
  padding-left: 1em;
}

<div class="navigation-bar">
    <a class="navigation-div-blur">
       <div class="navigation-div">
            <nav class="navigation">
                <!-- -->
                <h1 id="nava">test</h1>
                <h1 id="mailtext">Mail Us <a href="mailto:info@email.com"> <img id="mailpicture" src="images/gmail.png"></a> </h1>

            </nav>
        </div>
    </a>
</div>

Answer 2

在#mailtext margin-left:1230是问题所在。保持您的代码就像它是您必须做出的唯一改变一样：

#mailtext
{   
    float: right;
    font-size: 20px;
    color: white;
    font-style: italic;
}

Answer 3

改变你的

    #mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;   
font-size: 20px;
color: white;
font-style: italic;
}

到

   #mailtext
{
margin-top: 20px;
display: inline-block;
float:right;
font-size: 20px;
color: white;
font-style: italic;
}

希望它能解决你的问题

HTML / CSS css框和定位

3 个答案: