How can I move my + button to the right of my web page?
Question
Here is my 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>
Here is my 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 = "+";
}
}
And here is my CSS
body
{
text-align: left;
}
h3
{
text-align: left;
}
p1
{
text-align: right;
}
+
{
text-align: right;
}
I want my + button aligned to the right of the page but each time I try to edit the + sign the hidden text within the + sign moves to the right. Is there anyway to move only the + sign?
I am also new to this site and coding in general. I apologize for any mistakes in advance.
3 answers
solution1
0 2014-07-07 15:22:08
You can't target '+' using CSS, instead you have to target the surrounding 'a'.
a{
float: right;
}
solution2
0 2014-07-07 15:22:31
You just need to add a { float:right } style to your button.
I've salvaged your code and made a working JSFiddle here .
Be sure to target the element using css, ie <a> , and not the content of the element ( '+' ).
Note: As a recommendation, you might want to use a <button> tag instead of an anchor ( <a> ) since you seem to want a button, and not just floating text.
solution3
0 2014-07-07 15:27:00
In your CSS you have a selector called "+"? Use .AClassName (with the dot) and set class="AClassName" in your HTML element. Using a like adamjld suggests works, but also affects all other links on that page.
text-align only aligns your text within the surrounding box, so you have to make the surrounding "box" (for example a div) have the full page width or position the element to the right side (with position and right styles) or use float like rageandqq and adamjld suggest. Maybe you should also have a look at clear:both
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.