Question

这是我的HTML

<body>
   <h1>Javascript Read More Test</h1>
   <h3>Projects</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
   <span id="restOfArticle" style="display:none">
   <ul>
       <li>Some more text</li>
       <li>Some more text</li>
       <li>Some more text</li>
   </ul>
   </span>
   <a onclick="showMoreOrLess(this,'restOfArticle');">+</a>

这是我的Javascript

function showMoreOrLess(thisObj,bonusContent){
    var caption = thisObj.innerHTML;
    //alert(caption);
    if ( caption == "+" ) {
        document.getElementById(bonusContent).style.display = "inline";
        thisObj.innerHTML = "-";
    } else {
        document.getElementById(bonusContent).style.display = "none";
        thisObj.innerHTML = "+";
    }
}

这是我的CSS

body
{
    text-align: left;

}

h3
{
    text-align: left;
}

p1
{
    text-align: right;

}

+
{
    text-align: right;
}

我希望我的+按钮与页面右侧对齐，但每次我尝试编辑+符号时，+符号内的隐藏文字会向右移动。无论如何只能移动+号？

我也是这个网站的新手和编码。我提前为任何错误道歉。

Answer 1

您不能使用CSS定位'+'，而是必须定位周围的'a'。

a{
  float: right;
}

Answer 2

您只需在按钮中添加{ float:right }样式。

I've salvaged your code and made a working JSFiddle here

请务必使用css定位元素，即<a>，而不是元素的内容（'+'）。

注意：作为推荐，您可能希望使用<button>标记而不是锚点（<a>），因为您似乎想要一个按钮，而不仅仅是浮动文本。 /强>

Answer 3

在你的CSS中你有一个名为＆＃34; +＆＃34;的选择器？使用 .AClassName （带点）并在HTML元素中设置 class =＆＃34; AClassName＆＃34; 。像adamjld一样使用 a 表示可行，但也会影响该页面上的所有其他链接。

text-align仅在周围的框中对齐您的文字，因此您必须制作周围的框＃34; （例如div）具有整页宽度或将元素定位到右侧（使用位置和右样式）或使用像rageandqq和adamjld建议的浮点数。也许你也应该看清楚：两个

如何将我的+按钮移动到我的网页右侧？

3 个答案: