草庐IT

javascript - 如何创建不受某些 css 样式影响的新 <li>

coder 2023-08-07 原文

我有一个包含一些元素的菜单栏，但我想添加一个具有相同样式的注册/登录元素，但它在右侧对齐并且不会影响中心的其他元素。基本上，我有一个名为“登录/注册”的元素，我希望它不影响其他元素，并且拥有自己的独立类，同时仍然是菜单栏的一部分......非常感谢任何帮助。谢谢!

/*Some Fonts Here:*/

@font-face {
  font-family: Rusty;
  src: url('BrushScriptStd.otf');
}
* {
  font-family: Rusty;
  font-weight: Lighter;
}
.background {
  background-image: url(0.jpg);
  background-attachment: fixed;
  background-size: 100% auto;
  background-color: f7f7f7;
  background-repeat: no-repeat;
  background-position: center top;
}
/*Start of menu code*/

.menubar {
  height: 2.8vw;
  opacity: 0.85;
  background-color: #CCCCCC;
}
.clearfix:after {
  display: block;
  clear: both;
}
.menu-wrap {
  width: 50%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  background: #3e3436;
}
.menu {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}
.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'Ek Mukta';
}
.menu a {
  transition: all linear 0.15s;
  color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: rgba(189, 34, 34, 1);
}
.menu .arrow {
  font-size: 0.95vw;
  line-height: 0%;
}
.menu > ul > li {
  float: middle;
  display: inline-block;
  position: relative;
  font-size: 1.2vw;
}
.menu > ul > li > a {
  padding: 0.7vw 5vh;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
}
.menu li:hover .sub-menu {
  opacity: 1;
}
.sub-menu {
  z-index: 99999;
  width: 100%;
  padding: 0px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
  z-index: -5;
}
.sub-menu li {
  display: block;
  font-size: 1.2vw;
}
.login {
  width: 100%;
  margin: 0px relative;
  text-align: right;
}
.sub-menu li a {
  padding: 10px 10px;
  display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #3e3436;
  z-index: 99;
  postition: absolute;
}
/*End of menu code*/

.Rusty {
  font-family: "Rusty";
  color: rgba(189, 34, 34, 1);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0px 13px 21px rgba(0, 0, 0, 0.35);
}
.content {
  margin: auto;
  width: 80%;
  background-color: #CCCCCC;
  padding: 10px;
  height: 100%;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css" name="www-subscribe-widget">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="script.js"></script>
  <link rel="shortcut icon" href="favicon.ico">
  <title>RG - Home</title>
</head>

<body class="background">
  <!--Begginning of menubar-->
  <div class="menubar">
    <nav class="menu">
      <ul class="clearfix">
        <li><a href="aboutme.html">About Me <span class="arrow">&#9660;</span></a>
          <!--Here is the dropdown menu-->
          <ul class="sub-menu">
            <li><a href="#">Gaming</a>
            </li>
            <li><a href="#">Programming</a>
            </li>
            <li><a href="#">YouTube</a>
            </li>
            <li><a href="#">Other</a>
            </li>
          </ul>
          <!----------------------->
        </li>
        <li><a href="schedule.html">Schedule</a>
        </li>
        <li class="current-item">
          <a href="#">
            <p class="rusty">RedstoneGaming</p>
          </a>
        </li>
        <li><a href="equipment.html">Equipment</a>
        </li>
        <li><a href="contact.html">Contact Me</a>
        </li>
        <li><a href="login.html">Login/Sign Up</a>
        </li>
      </ul>
    </nav>
  </div>
  <!--End of menubar-->
  <div class="content">
    <div style="height: 7vh;" align="center">
      <h1 style="font-size: 3vw;" class="rusty">Colortone | Am I colorblind?! | W/Voiceless </h1>
      <iframe style="height:300%; width:auto;" src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2 align=" center "></iframe></div>
		</div>
	</body>
</html>

最佳答案

只需将 class 添加到登录元素并对其应用一些 CSS。

HTML:

<li class="login"><a href="login.html">Login/Sign Up</a></li>

CSS:

.menu > ul > .login {
    position: absolute;
    top: 0;
    right: 0;
}

关于javascript - 如何创建不受某些 css 样式影响的新 <li>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34243725/

javascriptampgt34lthtmlcss

有关javascript - 如何创建不受某些 css 样式影响的新 <li>的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  4. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  5. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  6. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  7. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  8. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  9. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  10. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

随机推荐