文本对齐：右不起作用答案

【问题标题】：Text-align: right doesn't work文本对齐：右不起作用
【发布时间】：2015-01-10 03:29:10
【问题描述】：

我正在尝试让我的菜单项在我的菜单栏上向右移动。但它不起作用。即使我删除了 align: center 代码，让它再次左对齐也不起作用。有人有想法么？谢谢

.menu {
  background-color: black;
  height: 25px;
  font-size: 20px;
}
.menuItem {
  display: inline;
  margin-top: 15px;
}
.menuItem a {
  color: white;
  text-decoration: none;
}
.menuItem a:hover {
  color: purple;
}

<div class="main">
  <div id="header"></div>
  <div class="menu">
    <div class="menuItem"><a href="Quizes.aspx">Välj quiz</a>
    </div>
    <div class="menuItem"><a href="Login.aspx">Logga in</a>
    </div>
  </div>
  <asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>
</div>

【问题讨论】：

您需要显示 HTML。
您的 CSS 代码中甚至没有 text-align。
@SleekGeek - 这解释了为什么它不起作用：P
给定.menuItem{display:inline}，您可以应用.menu {text-align:right;} 将项目向右对齐。

标签： html css text-align

【解决方案1】：

你想要...... 尝试这个（添加了 text-align:right 并且效果很好）

<html>
<head>
    <style>
    .menu {
    background-color: black;
    height: 25px;
    font-size: 20px;
}
.menuItem {

    margin-top: 15px;
    text-align: right;
}
.menuItem li{
    list-style: none;
     display: inline;
     color:white;
}

.menuItem a {
    color: white;
    text-decoration: none;
}
.menuItem a:hover {
    color: purple;
}
    </style>
</head>
<body>
    <div class="menu">
    <div class="menuItem"><ul>
    <li>Item</li>
    <li>Item2</li>
    <li>Item3</li>
</ul>
    </div>
    </div>

</body>
</html>

【讨论】：

你做了什么改变，为什么？稍微解释一下可能会有所帮助。
我刚刚添加了 text-align: right;菜单项和菜单项我使用无序列表
我明白了。这行得通，但div.menuItem 的目的是什么？我想可能是re-organized a little。但无论如何，反对者愿意发表评论吗？
我想帮助提出问题的人，我不知道他们为什么要投减号。