个人中心
gpt4 book ai didi

html - 仅在菜单栏上填充左文本

转载 作者：行者123 更新时间：2023-11-28 12:37:29 26 4
gpt4 key购买 nike

我一直在尝试缩进(进一步向右)“展览”，但每当我更改单元格填充时，它都会同时更改子元素之间的间距。另一个问题是我想确保通过悬停出现的栏保持屏幕的整个宽度。有什么想法吗？

http://jsfiddle.net/zuVu7/61/

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

最佳答案

问题就出在你的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;

}

在不改变子元素的情况下将展览向右移动了大约 150 像素。被 * 包围的部分是我唯一更改的部分。

**编辑:

好吧，我唯一能想到的就是添加一个不间断的空格: ;

这会让它看起来像这样:

<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 上不是很漂亮，但它可以工作。然后，无论将主菜单移动多少，您只需更改子菜单的左侧位置即可。

关于html - 仅在菜单栏上填充左文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17892435/

26 4 0
文章推荐： javascript - 与 jQuery 混淆，第 1 行 $未定义
文章推荐： mouseover() 和 slideDown 需要 jQuery 帮助
文章推荐： html - 如何在 CSS 中水平拉伸(stretch)图像并在 HTML 中显示 3 个单独的图像
文章推荐： javascript - JSON.parse 意外字符