Question

我有一个有一些项目的菜单栏，但我想添加一个具有相同风格的注册/登录项目，但是它在右侧对齐并且不会影响中心的其他项目。基本上，我有一个名为＆＃34; Login / Sign Up＆＃34;而且我希望它不会影响其他任何项目并拥有它自己的独立课程，同时仍然是菜单栏的一部分....任何帮助都非常感谢。谢谢！

＆＃13;

/*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%;
}

＆＃13;

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

＆＃13;

Answer 1

只需在登录元素中添加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;
}

Answer 2

这样的事情怎么样？

<li id="login-link"> </li>

.menu ul #login-link{
    color: white; /* or whatever */
}

Answer 3

要正确对齐，请使用<Window x:Class="Issue.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Issue" mc:Ignorable="d" SizeToContent="WidthAndHeight" ResizeMode="NoResize" Title="Window1"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="160"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <ComboBox x:Name="Cbx" Grid.Column="0" Grid.Row="0"/> <Button Grid.Column="1" Grid.Row="0" Height="{Binding ElementName=Cbx, Path=ActualHeight}"> <Image Source="Play.png"/> </Button> <Label Content="Hello" Grid.Column="0" Grid.Row="1"/> <Label Content="Big Hello" Grid.Column="0" Grid.Row="2" FontSize="15"/> </Grid>。

float:right

Answer 4

我不确定，但我认为您正在寻找的是其中一些选项：

<li class="alignright-abs"><a href="login.html">Login/Sign Up</a>
<li class="alignright-fixed"><a href="login.html">Login/Sign Up</a>

<强> CSS

li.alignright-abs {
position:absolute;
top:0;
right:0;
}

li.alignright-fixed {
position:fixed;
top:0;
right:0;
}

如何创建不受SOME CSS样式影响的新<li>

4 个答案: