Issue with legend

HTML & CSS
1

I have a legend tag in my html

<legend>
Search Flight
</legend>

This generates a text “Search Flight” with a line under it in browser.
so far this is fine.

Now I wish to put a text “help” …right at the end of this legend line.

What I should do ?

2

Perhaps say a bit more about what you are trying to do. What is the Help text for? Can you provide a screen shot of what you are aiming for?

3

help-text is an image icon. Please see the screenshot attached.

4

It’s not really clear what that long line is about, but anyhow, I’d suggest placing the button absolutely, in relation to the form element, which would be set to position: relative.

5

Hi,

As Ralph said the question is not clear and does depend on many variables (such as where is the line coming from and how long is it or is it the fieldset border etc…).

Here is a starting point for the method Ralph proposed.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.formwrap {
	position:relative;
	padding:20px 0;
}
.icon {
	position:absolute;
	right:20px;
	top:0;
	width:20px;
	height:20px;
	line-height:20px;
	border-radius:50%;
	text-align:center;
	color:#fff;
	background:red;
	cursor:pointer;
	font-weight:bold;
}
.icon:hover { background:blue; }
</style>
</head>

<body>
<form>
		<div class="formwrap">
				<fieldset>
						<legend>Test Legend</legend>
						<span class="icon">?</span>
						<label for="test">Test</label>
						<input type="text" name="test" id="test">
				</fieldset>
		</div>
</form>
</body>
</html>

I have eschewed using the fieldset as the stacking context in favour of a div wrapper because fieldsets are special elements and are best left alone as far as stacking contexts are concerned.