Question

我一直试图缩进（右边）'展览'，但每当我更改单元格填充时，它同时会改变子元素之间的间距。另一个问题是我想确保通过悬停显示的条形图仍然是屏幕的整个宽度。有什么想法吗？

HTML

<body class="bg">

<div>
<nav>
     <ul id="mainmenu">

          <li id="liServices" class="active"><a href="#" class="maintextcolour">EXHIBITIONS</a>
             <ul id="SubMenuY2" class="submenu">
                 <li><a href="current.html" class="subtextcolour">CURRENT</a></li>
                 <li><a href="previous2.html" class="subtextcolour">PREVIOUS</a></li>     
             </ul></li>
    </nav>

CSS

    @charset "UTF-8";
    /* CSS Document */

    .bg {
        background-attachment:fixed; 
        background-repeat: no-repeat; 
        -moz-background-size: cover;
      background-size: cover;
    background-color:#666;
        margin: 0;
        }

    #mainmenu {
      margin: 0;
      list-style-type: none;
      position: relative;  
      padding-left:0;
      top:100px; 
    }


    #mainmenu li {
      clear: left;
       position:relative;
    }


    #mainmenu a {
      display: block;
      overflow: hidden;
      float: left;
     width:100%;
      position:relative;
        opacity: 1;
        -webkit-transition: all 0.4s ease-in-out;
        padding-left:30px;
        line-height: 42px;
  }

    #mainmenu > li:hover > a {
      background-position: 0 0;
      background-color:clear;
      background-color:rgba(255,255,255,0.5);
       width:100%;
       \
     opacity: 0;
        -webkit-transition: none;
  }

    #mainmenu li.active a {
      background-position: 0 0;
      background-color:clear;
        width:100%; 
    }

    .submenu {
      list-style-type: none; 
      float: left;
      display: none;
      position:absolute;
      left: 80px;
      top:0px;
      width: auto;
    }

    #mainmenu li a:hover + .submenu, .submenu:hover {
      display:block;
    } 

    .submenu li {
      display: inline-block; 
      clear: none !important;
    }

    .submenu li a {
      float: right;
      margin-left: 10px;  
    }


    .maintextcolour {
        font-family: LetterGothic, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color:#FFF;
        text-decoration: none;
        position: absolute;
        padding-top:11px;
        cursor: url(cart3.png), auto;   
    }

    .subtextcolour {
        font-family: LetterGothic, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color:#FFF;
        text-decoration: none;
        padding-top:11px;
        cursor: url(cart3.png), auto;
    }

    .subtextcolour:hover {
        font-family: LetterGothic, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color:#666;
        text-decoration: none;
        padding-top:11px;
        cursor: url(cart3.png), auto;
    }

Answer 1

问题就出在你的css中：

#mainmenu {
  margin: 0;
  list-style-type: none;
  position: relative;  
  padding-left:0;
  top:100px;

}

我能够将其更改为：

#mainmenu {
  **margin-left: 150px;**
  list-style-type: none;
  position: relative;  
  padding-left:0;
  top:100px;

}

在不改变儿童元素的情况下，将展览向右移动约150px。被*包围的部分是我改变的唯一部分。

**编辑：

嗯，我能想到的另一件事就是添加一个不间断的空间：&nbsp;

这会使它看起来像这样：

<body class="bg">


<div>
<nav>
     <ul id="mainmenu">

<li class="active"><a href="#" class="maintextcolour">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EXHIBITIONS </a>
             <ul id="SubMenuY2" class="submenu">
                 <li><a href="current.html" class="subtextcolour">CURRENT</a></li>
                 <li><a href="previous2.html" class="subtextcolour">PREVIOUS</a></li>     
             </ul></li>
    </nav>
    </div>
<img src="line.jpg" align="top" width="100%" height="1" />
</div>

<br />

CSS：

    @charset "UTF-8";
    /* CSS Document */

    .bg {
        background-attachment:fixed; 
        background-repeat: no-repeat; 
        -moz-background-size: cover;
      background-size: cover;
    background-color:#666;
        margin: 0;
        }

    #mainmenu {
      margin: 0;
      list-style-type: none;
      position: relative;  
      padding-left:0;
      top:100px;

    }


    #mainmenu li {
      clear: left;
       position:relative;
    }


    #mainmenu a {
      display: block;
      overflow: hidden;
      float: left;
     width:100%;
      position:relative;
        opacity: 1;
        -webkit-transition: all 0.4s ease-in-out;
        padding-left:30px;
        line-height: 42px;



    }

    #mainmenu > li:hover > a {
      background-position: 0 0;
      background-color:clear;
      background-color:rgba(255,255,255,0.5);
       width:100%;
       \
     opacity: 0;
        -webkit-transition: none;


    }

    #mainmenu li.active a {
      background-position: 0 0;
      background-color:clear;
        width:100%; 


    }

    .submenu {
      list-style-type: none; 
      float: left;
      display: none;
      position:relative; 
          left: 120px;
          top: -53px;
      width: auto;
    }

    #mainmenu li a:hover + .submenu, .submenu:hover {
      display:block;
    } 

    .submenu li {
      display: inline-block; 
      clear: none !important;

    }

    .submenu li a {
      float: right;

    }


    .maintextcolour {
        font-family: LetterGothic, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color:#FFF;
        text-decoration: none;
        position: absolute;
        padding-top:11px;
        cursor: url(cart3.png), auto;


    }





    .subtextcolour {
        font-family: LetterGothic, Arial, Helvetica, sans-serif;

    font-size: 14px;
    color:#FFF;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}

.subtextcolour:hover {
    font-family: LetterGothic, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color:#666;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}

它在HTML上并不是很漂亮，但它确实有用。然后你只需要更改子菜单的左侧定位，无论你移动主菜单多少。

仅在菜单栏上填充左侧文本

1 个答案: