HTML / CSS的CSS框和定位 [英] HTML/CSS css boxes and positioning

问题描述

我有一个CSS greybox：（当我说greybox时，我的意思是我创建的CSS盒子，它的颜色为灰色，如下图所示。）

  .navigation-div 
 {
 margin-top：14px; 
 box-shadow：0px 0px 10px rgba（0,0,0,0.47）; 
 padding：0; 
颜色：＃E3E3E3; 
背景颜色：＃333; 
} 
  

这个灰箱在我的头文件里面，因为这个灰箱比它看起来大，它会通过标题图片，但不会出现。

有了这个：

 < div class =navigation-bar> 
< a class =navigation-div-blur> 
< div class =navigation-div> 
< nav class =navigation> 
< a href =mailto：[e-mail]>< img id =mailpicturesrc =images / gmail.png>< / a> 
< h1 id =mailtext>邮寄我们< / h1> 
< h1 id =nava>测试< / h1> 
< / nav> 
< / div> 
< / a> 
< / div> 
  

图片和Mail Us显示在正确的位置，不会暴露出框。但是，当我把它放在盒子里时，这个测试就暴露了出来。
这里是我背后的CSS

  #mailtext 
 {
 margin-top ：20px; 
 display：inline-block; 
 margin-left：1230px; 
 font-size：20px; 
颜色：白色; 
 font-style：italic; 
} 
 
 #mailpicture 
 {
 display：inline-block; 
 margin-top：16px; 
 float：right; 
} 
 
 #nava 
 {
 font-size：20px; 
颜色：白色; 
 font-weight：bold; 
 font-style：italic; 
 margin-top：20px; 
 display：inline-block; 
 margin-left：500px; 
} 
  

您已经看到了CSS框。

我想要完成以下两件事之一：使CSS盒变小并降低它，或让CSS正确地将测试与更多元素一起定位，以保持与Mail Us相同的行。

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

这就是测试的样子：

这就是没有测试的样子：

正如您可以注意到的那样，第一个标题图片下方有一个较大的框。没有测试的人留在标题的图片中。

解决方案

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

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

如果您想将所有菜单项放置到右侧，您可以在内嵌块上使用 text- align：right 如果你想让你的邮件元素在右边，你可以坚持使用 float：right 元素将它们粘在右边。

/ code>，但将邮件元素作为最后一个放在 nav

$ b中也会更容易$ b

您可以在标头< h1> 内嵌入锚点< a> ，以在标头内创建链接

 < h1 id =mailtext>邮件我们< a href =mailto：[e-mail]>< img id =mailpicturesrc = 图像/ 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）;填充：0;颜色：＃E3E3E3; background-color：＃333; text-align：right;}＃mailtext {margin-top：20px;显示：inline-block; / * margin-left：1230px; * / font-size：20px;白颜色; font-style：italic;}＃mailpicture {display：inline-block; margin-top：16px; float：right;}＃nava {font-size：20px;白颜色; font-weight：bold; font-style：italic; margin-top：20px;显示：inline-block; / * margin-left：500px; * /} / *使用填充分隔您的导航元素* /。navigation> * {padding-left：2em;}

< div类=导航栏> < a class =navigation-div-blur> < div class =navigation-div> < nav class =navigation> < a href =mailto：[e-mail]>< img id =mailpicturesrc =images / gmail.png>< / a> < h1 id =mailtext>邮寄我们< / h1> < h1 id =nava>测试< / h1> < / NAV> < / DIV> < / div>

p 解决方案 http://jsbin.com/xunokaviju/1/

  .navigation-div {margin-top：14px; box-shadow：0px 0px 10px rgba（0,0,0,0.47）;填充：0;颜色：＃E3E3E3; background-color：＃333; text-align：right;}＃mailtext {margin-top：20px;显示：inline-block; / * margin-left：1230px; * / font-size：20px;白颜色; font-style：italic;}＃mailpicture {display：inline-block; margin-top：16px; / * float：right; * /}＃nava {font-size：20px;白颜色; font-weight：bold; font-style：italic; margin-top：20px;显示：inline-block; / * margin-left：500px; * /} / *使用填充来填充元素* /。navigation> * {padding-left：1em;}  

< div类=导航栏> < a class =navigation-div-blur> < div class =navigation-div> < nav class =navigation> <！ - - > < h1 id =nava>测试< / h1> < h1 id =mailtext>邮寄我们< a href =mailto：[e-mail]> < img id =mailpicturesrc =images / gmail.png>< / a> < / H1> < / NAV> < / DIV> < / div>

I have a CSS greybox: (When I say greybox, I mean the CSS box I have created that I have made with the color grey as you can see down below.)

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

This greybox is inside of my header and since this greybox is bigger than it appears, it goes past the header image but doesn't appear.

With this:

<div class="navigation-bar">
    <a class="navigation-div-blur">
       <div class="navigation-div">
            <nav class="navigation">
                <a href="mailto:[e-mail]"><img id="mailpicture" src="images/gmail.png"></a>
                <h1 id="mailtext">Mail Us</h1>
                <h1 id="nava">test</h1>
            </nav>
        </div>
    </a>
</div>

The picture and Mail Us show in the correct position not exposing the box. The test however, when I put it in exposes the box. Here is the CSS I have behind this

#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;
}

You already saw the box for CSS.

I would like to accomplish either one of two things: Make the CSS box smaller and lower it, or have the CSS correctly position the test along with more elements to stay in the same line as the Mail Us.

NOTE: I have tried for the test margin-top:-pixels, this does not go up high enough and stops going up after a while.

This is what it looks like with the test: This is what it looks like without the test:

As you can notice the first one has a larger box that drops down beneath the header picture. The one without the test has stayed in the header's picture.

解决方案

There are a few problems with your code. First, you should not nest anchors (<a>) in other anchor elements. Using margin to position elements is not a good idea, you are already trying to use inline-block to change default block display of headers and at the same time you are floating one of your inline-block elements to the right.

Adding big margin to the element makes the element use more space and moves next inline element to the new line if it cannot fit in one line with other elements.

If you want to position all your menu items to the right you can use text- align:right on your inline-block elements to stick them to the right.

If you want your mail element be on the right you may stick to using float:right on it, but it would also be easier to just place mail element as the last one in the nav

You can nest anchors <a> inside headers <h1> to create links inside headers

<h1 id="mailtext">Mail Us <a href="mailto:[e-mail]"><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:[e-mail]"><img id="mailpicture" src="images/gmail.png"></a>
                <h1 id="mailtext">Mail Us</h1>
                <h1 id="nava">test</h1>
            </nav>
        </div>
    </a>
</div>

A bit better solution 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:[e-mail]"> <img id="mailpicture" src="images/gmail.png"></a> </h1>

            </nav>
        </div>
    </a>
</div>

这篇关于HTML / CSS的CSS框和定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！