Question

我的页面顶部有一个链接栏，其中包含三个链接：了解，加盟商内容，然后是连接到下拉列表的个人资料链接。我希望配置文件链接位于右侧，其他两个位于左侧。

#top-links-bar{padding:30px;border:0px solid black;background: linear-gradient(gray, white);}

.caret{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid black;display:inline-block;
margin-top:5px;vertical-align:middle;transition:all 2s;}

.caret:hover{border-top:5px solid green; cursor:pointer}

.top-link{font-family:romeral; color:#1851EE; padding:30px; transition:color 2s, background 2s;}

.top-link:hover{color:gray;background:linear-gradient(white, gray);cursor:pointer;border-left:1px solid black;border-right:1px solid black;}

.dropdown{font-family:champagnelimo; background:linear-gradient(gray, green); z-index:200; height:150px; width:100%; padding:50px; border:4px solid gray; position:absolute; top:100px;}
 
.dropdown2{
border:3px solid grey; background:linear-gradient(to left, #37B732, orange); width:20%; position:relative; left:10%;}

.operation-your-profile{text-align:center; padding:20px; border-top:1px solid gray; border-bottom:1px solid gray;display:block;}
css

<div id="top-links-bar">

<span class="top-link link-bar-link" id="learn">Learn <span class="caret"></span></span>

<span class="top-link link-bar-link" id="affiliate-content">Affiliate Content <span class="caret"></span></span>

<span class="top-link link-bar-link" id="account-profile" style="text-align:right;"><?php echo $_POST["name"];?> <span class="caret"></span></span>


</div>
<div id="affiliate-content-dropdown" class="dropdown">
<p style="font-size:20pt;"><b>Tutorial Content</b></p>
<ul style="list-style-type:square; font-size:15pt;">
<li><a href="http://othersite.com" target="_blank">OtherSite.com</a></li>

</div>

<div id="your-profile-dropdown" class="dropdown2">
    <span class="operation-your-profile">My Profile</span>
    <span class="operation-your-profile">Log Out</span>
</div>

最大的问题是css中没有任何内容与style属性相矛盾！即使有，内联规则也会优先提前谢谢。

Answer 1

创建3个css类：

float-left { float: left;}
float-right {float: right;}
clear-float {clear: both;}

然后你可以尝试

 <span class="top-link link-bar-link float-left" id="learn">Learn <span class="caret"></span></span>

 <span class="top-link link-bar-link float-left"  id="affiliate-content" >Affiliate Content <span class="caret"></span></span>

 <span class="top-link link-bar-link float-right"  id="account-profile">trest <span class="caret"></span></span>

<div class="clear-float"></div>

你也可以尝试更多语义的东西，比如：

CSS：

.caret{
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid black;
    display:inline-block;
    margin-top:5px;
    vertical-align:middle;
    transition:all 2s; 
    margin-left:4px;

}


#top-links-bar{
    padding:5px;
    border:0px solid black;
    background: linear-gradient(gray, white);
}
#top-links-bar ul{
    display: block;
    list-style : none;
    padding: 0;
    margin: 0;
}
#top-links-bar ul li a{
    display: block;
    float: left;
    padding: 17px 17px;
    position: relative;
}
#top-links-bar ul li a:hover{
    color:gray;
    background:linear-gradient(white, gray);
    cursor:pointer;
    border-left:1px solid black;
    border-right:1px solid black;
    padding: 17px 16px;
}
#top-links-bar ul li:last-child {
    float:right;
}

HTML菜单

<div id="top-links-bar">
    <ul>
        <li><a href="#">Learn<span class="caret"></span></a></li>
        <li><a href="#">Affiliate Content<span class="caret"></span></a</li>
        <li><a href="#"><?php echo $_POST["name"];?><span class="caret"></span></a></li>
    </ul>
    <div style="clear:both"></div>


</div>

Answer 2

文本对齐应用于文本内部，它不会对应应用的范围或容器。

您想要定位的项目需要使用位置或浮动来到达那里。

position: absolute; right:0; top:0;

或者...

float:right;

Answer 3

这是一个更新的小提琴，它清理了一些代码，因此它可读并纠正了一些事情：http://jsfiddle.net/crmLh63b/2/

首先，你不应该跨越跨度。 Spans不应该在其中包含任何其他容器，因此我将其更改为div。然后，如果我们浮动内容区域，它们比绝对定位更好（尽管可以根据你的jQuery下拉工作方式随意更改）。

你那里还有一个未被封闭的<ul>。

然后，如果我们将您的第一个项目浮动到左侧的标题项目，并通过定位#account-profile ID浮动第三个项目，我们可以向右浮动该项目，以便为您提供所需的效果。更新后的代码：

HTML：

<div id="top-links-bar">
    <div class="top-link link-bar-link" id="learn">
        Learn <span class="caret"></span>
    </div>

    <div class="top-link link-bar-link" id="affiliate-content">
        Affiliate Content <span class="caret"></span>
    </div>

    <div class="top-link link-bar-link" id="account-profile">
        <?php echo $_POST["name"];?> <span class="caret"></span>
    </div>
</div>

<div id="affiliate-content-dropdown" class="dropdown">
    <p style="font-size:20pt;"><b>Tutorial Content</b></p>
    <ul style="list-style-type:square; font-size:15pt;">
         <li><a href="#" target="_blank">OtherSite.com</a></li>
    </ul>
</div>

<div id="your-profile-dropdown" class="dropdown2">
    <span class="operation-your-profile">My Profile</span>
    <span class="operation-your-profile">Log Out</span>
</div>

CSS：

 #top-links-bar {
      float: left;
      width: 100%;
      padding:30px;
      background: linear-gradient(gray, white);
 }
 .caret {
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      border-top:5px solid black;
      display:inline-block;
      margin-top:5px;
      vertical-align:middle;
      transition:all 2s;
 }
 .caret:hover {
      border-top:5px solid green;
      cursor:pointer
 }
 .top-link {
      float: left; 
      font-family:romeral;
      color:#1851EE; 
      padding:30px; 
      transition:color 2s, 
      background 2s;
 }
 #account-profile.top-link {
      float: right;
 }
 .top-link:hover {
      color:gray;
      background:linear-gradient(white, gray);
      cursor:pointer;
      border-left:1px solid black;
      border-right:1px solid black;
}
.dropdown {
    float: left; 
    font-family:champagnelimo;
     background:linear-gradient(gray, green); 
     z-index:200; 
     height:150px; 
     width:100%; 
     padding:50px; 
     border:4px solid gray;  
}
ul li:visited {
     color:blue;
}
.dropdown2 {
     float: left;
     margin-left: 10%;
     border:3px solid grey;
     background:linear-gradient(to left, #37B732, orange);
     width:20%;
     position:relative;
}
.operation-your-profile{
   text-align:center;
   padding:20px;
   border-top:1px solid gray;
   border-bottom:1px solid gray;
   display:block;  
}

为了让它尽可能清爽，可能还有很多需要做的清理工作，但这应该是一个很好的起点。

Text-align css不起作用

3 个答案: