How can I keep the <a> tag underline running from left to right without any breaks when there are <span> tags inside, and with left/right padding or margin set? It would also be helpful to know why that happens?
I can probably use box shadow or border bottom instead, but I'm not looking for those solutions.
span {
padding-right: 10px;
}
<a href="#">
<span><</span>
<span>Previous page</span>
</a>
In your case padding will add 10px space between both text so we can instead use letter-spacing with the first span to create this space.
If you refer to the specification you can read:
Underlines, overlines, and line-throughs are applied only to text
(including white space, letter spacing, and word spacing): margins,
borders, and padding are skipped
span:first-child {
letter-spacing: 10px;
}
<a href="#">
<span><</span>
<span>Previous page</span>
</a>
To make this more generic we can consider letter-spacing with pseudo-element to simulate space between span:
By the way don't forget to consider white space [as mentionned above] that is already present in some cases.
.first span:after {
content:" ";
letter-spacing: 15px;
}
.second span:after {
content:" ";
letter-spacing: 30px;
}
span:last-child::after {
display:none; /* no need for last child*/
}
<a href="#">
<span>aa</span>
<span>bb</span>
<span>cc</span>
</a>
<br>
<span>aa</span><span>bb</span><span>cc</span>
<br>
<a href="#" class="first">
<span>aa</span>
<span>bb</span>
<span>cc</span>
</a>
<br>
<span>aa</span><span>bb</span><span>cc</span>
<br>
<a href="#" class="second">
<span>aa</span>
<span>bb</span>
<span>cc</span>
</a>
Removing the padding and inserting a space would be an option.
<a href="#">
<span>< </span>
<span>Previous page</span>
</a>
Related
When using heading inside anchor "outline-style" is not getting applied.
I added outline: 4px dashed darkorange; for focus-visible of parent anchor tag.
It works for auto style outline: 4px auto darkorange; , but for others like solid, dashed, dotted it's not working
Please let me know if I miss anything or if we have any workaround for this issue
<a class="focus-visible-only" href="#">Sample Link <a>
<h1 class="focus-visible-only"> Sample Heading </h1>
<a class="focus-visible-only" href="#">
<h1> Heading inside Link </h1>
</a>
<a class="focus-visible-only" href="#">
<span> span inside Link <span>
</a>
.focus-visible-only:focus-visible {
outline: 4px dotted darkorange;
}
codepen link: https://codepen.io/vivid888/pen/xxYjNJx
As <h1> by itself is not an interactive element, you can't tab to it. To make it tabbable, apply tabindex="0".
To make the nested <h1>-property take the focus styling, you need to use a.focus-visible-only:focus-visible to trigger the focus, and then afterwards use the selector <h1> to apply the styling.
I don't know why the <h1> Heading inside Link </h1>-element's behaviour is so weird - it wraps around the
<a class="focus-visible-only" href="#">
<span> span inside Link <span>
</a>
element for some reason. You could just apply display: block on the container <a>-element to change this.
Also, you can use max-width: fit-content if you don't want the link to take up the full width.
.focus-visible-only:focus-visible {
outline: 2px dotted darkorange;
}
a.focus-visible-only:focus-visible h1 {
outline: 2px dotted darkorange;
}
a:last-of-type {
display: block;
}
a,
h1,
span {
max-width: fit-content;
}
<a class="focus-visible-only" href="#">Sample Link <a>
<h1 class="focus-visible-only" tabindex="0"> Sample Heading </h1>
<a class="focus-visible-only" href="#">
<h1>Heading inside Link </h1>
</a>
<a class="focus-visible-only" href="#">
<span>span inside Link </span>
</a>
This question already has answers here:
How to align two elements on the same line without changing HTML
(8 answers)
Closed 2 years ago.
<!DOCTYPE html>
<style>
img {
border: 0;
width: 1%;
height: 1%;
padding: 0px 10px 0px 10px;
}
</style>
<html>
<body style="background-color:grey; text-align:center;">
<div style="white-space:nowrap;">
<a style="color:#29ff4a" href="#">HOME</a>
<img src="https://i.ibb.co/7gT6WLJ/New-Piskel-1-png.png" alt="Candy Corn Emoji">
<a style="color:#39d5f6" href="#">READ</a>
<p style="color: white">|</p>
<a style="color:#39d5f6" href="#">INFO</a>
<img src="https://i.ibb.co/7gT6WLJ/New-Piskel-1-png.png" alt="Candy Corn Emoji">
</div>
</body>
</html>
I'm trying to recreate the Homestuck website (www.homestuck.com/story/1/) for fun, and I can't figure out how to make the links on top stay on the same line. I tried using style="white-space:nowrap" on a parent div element for the links, but it doesn't seem to work.
how about using span tag instead of p tag.
<a style="color:#39d5f6" href="#">READ</a>
<span style="color: white">|</span>
<a style="color:#39d5f6" href="#">INFO</a>
a, span, img etc. are inline elements. It means that they will not take up entire space and new tags will not take up a new line.
p is a block level element. It means that p tag will take up the entire width and new paragraphs will start from new line.
This is what exactly is happening here. a will not take the entire width but as p is a block level element, it will start from a new line.
<a style="color:#39d5f6" href="#">READ</a>
<p style="color: orange">|</p> <!--I changed color because white is not visible-->
To cope up with this, we have two choices -
1)Use span instead of p. It is and inline element and it will continue with the link.
<a style="color:#39d5f6" href="#">READ</a>
<span style="color: orange">|</span> <!--I changed color because white is not visible-->
2)Alter the display property of p. We can change the default display property (which is block here) to inline-block or inline using css.
<a style="color:#39d5f6" href="#">READ</a>
<p style="color: orange; display: inline-block">|</p> <!--I changed color because white is not visible-->
The second method is not very much recommended, still you can use it.
I am trying to get some text to wrap so I have this:
h3.h3_title {
white-space:normal !important;
}
Here is the html:
<li>
<a href="#">
<img src="img.png" />
<h3 class="h3_title">this is some text which is supposed to wrap but it is not happening</h3>
</a>
</li>
For some reason it's not wrapping..and ideas why?
h3.h3_title {
white-space:normal !important;
width:20px !important;
}
Set width according to your conditon
This is the html asp.net generated (with some client-identifying details removed)
In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new window or open also works.
In other browsers, it all works as expected.
Is there anything simple anyone can see that I could do to this to get it to work correctly in IE7?
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<div style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</div>
<div style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</div>
</a>
</div>
You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.
You don't need to use division to do this:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" />
<span id="XXX">Some text right here</span>
</a>
</div>
This should work to the same effect...
Try removing the divs, as the img tag and span are naturally display-inline. Add display block, float left if you need margins right to the tags themselves as supposed to adding divs. Also, to the anchor tag, add overflow:hidden (if you use floats), so that it takes up the total space of the two child elements.
Because of your floats, the anchor collapses. Also, you can't put block level elements <div/> inside inline elements <a/>.
Keeping with the non-W3C code you've got there, you'd need to clear your floats with this code right before the closing </a>
<div style="clear: both"></div>
You'll want to probably create a class called .clear and move the styles to that. Here's an example from my site:
.clear-fix {
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
A better way to do your code which is W3C compliant is the following:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<span style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</span>
<span style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</span>
<span class="clear-fix"></span>
</a>
</div>
<div class="actions-wrapper">
<ul>
<li>
<a class="" href="#answer-form">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action1
</a>
</li>
<li>
<a class="" href="">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action2
</a>
</li>
</ul>
</div>
Hello, I have the previous code.
My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the containing the icon to be separated from its text within the same li.
In my css i have the following :
.actions-wrapper ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
.actions-wrapper ul li { display:inline; margin-right: 12px;padding:3px 0;}
I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.
Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/
In this example the "Another action" is not on the same line of its icon.
If i add the white-space : nowrap; it wont work anymore in IE6
does adding the text-alignment to the ul achieve what you want?
.actions-wrapper ul {
text-align: right;
}
Updated after new information
changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;
Updated fiddle (with hack included) : here
By looking at your markup, seems you want the icon and the text to make the same action.
Why not use css to add the icon next to the text, like so:
<li>
<a href="#answer-form" id="icon-label">
Action1
</a>
</li>
With the CSS:
#icon-label {
background: transparent url(path/to/image) no-repeat x y;
}
You can do this by removing all the whitespace from between the anchors, and separating them with a .
I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.