I have the following markup:
<ul>
<label class="radio-label" for="${response[i].name}"><li><span>${freightName}:</span> ${response[i].price},-</li></label>
<input class="radio-input" type="radio" id="${response[i].name}" name="drone" value="${response[i].name}-radio-value">
</ul>
I get this as the result:
Result
I tried to set the label to position: absolute; but this just makes it more difficult to space vertically after, is there anyone who can give me a tip or two? Any help is greatly appreciated !
Cheers!
First, you're using HTML tags incorrectly. Please don't put any other tags in <ul> except <li>.
Refer:
ul tag documentation
You might try something like this, which would put a label on top of a list item with radio button:
<ul>
<li>
<label>Label</label>
<input class="radio-input" type="radio">
<span>hi</span>
</li>
</ul>
label {
display: block;
}
li {
list-style: none;
}
Codepen link
You are using the <ul> tag and the <li> tag incorrectly. Here is the correct structure:
<ul>
<li>
any tags
</li>
<li>
any tags
</li>
<li>
any tags
</li>
</ul>
Do it like this, wrapping it in a <li>...</li> tag.
<ul>
<li>
<label class="radio-label" for="${response[i].name}"><span>${freightName}:</span> ${response[i].price},-</label>
<input class="radio-input" type="radio" id="${response[i].name}" name="drone" value="${response[i].name}-radio-value" />
</li>
</ul>
Related
I've two radio buttons.
If I click on the radio dot or the label the clicked element is active.
I include two span tags with fontawesome icons and if I click on the span the correct radio button should be active.
I try it with the for attribute but it doesn't work.
Is it possible?
<nav>
<ul>
<li>
<span class="fa fa-address-book" for="firmenkunde"></span>
<span class="notepad--display" data-txt="ShopNavigationFirmenkunde">
<input type="radio" id="firmenkunde" name="kunde" value="firmenkunde">
<label for="firmenkunde">Firmenkunde</label>
</span>
</li>
<li>
<span class="fa fa-address-book-o" for="privatkunde"></span>
<span class="notepad--display" data-txt="ShopNavigationPrivatkunde">
<input type="radio" id="privatkunde" name="kunde" value="privatkunde">
<label for="privatkunde">Privatkunde</label>
</span>
</li>
</ul>
</nav>
https://jsfiddle.net/wys7e7p2/
Thank you.
#edit:
I don't want to use javascript.
I can't reproduce your fiddle here in a snippet because the images don't show up. But I'm linking a fiddle: https://jsfiddle.net/wys7e7p2/1/. The for attribute doesn't work on span tags. So I changed your span's to label's and modified the CSS to keep the design the same.
I am trying to align my search bar to the right side of the li menu items.
HTML:
<body>
<div id="navbox">
<nav id="nav">
<ul id="nav">
<li>Home</li>
<li>History</li>
<li>Leaders</li>
<li>Youth</li>
<li>Links</li>
<li>Contact</li>
<li>
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</li>
</ul>
</nav>
</div>
</body>
CSS:
form {
padding-left: 15px;
margin: 0;
}
Is there any way possible to accomplish this?
display:inline-block will work for you.
ul#nav li {
display:inline-block
}
You can find Demo here.
yes sure, you can simply add this line to your CSS:
nav, ul, li {display:inline-block}
and it will work. But a comment: be sure not to use the same ID twice. And try to use classes whenever possible (which is almost always)
Just in case, see this fiddle so you can play around, try adding paddings, margins, whatever, adn see how it reacts
I have this link in list with some inputs inside:
<ul class="code__list">
<li class="code__item"> <a class="code__link private" href="#">Test1<b><input type="text" class="intercomInput forCode" name="clientCode" value="1234"></b><div>Test2</div></a>
</li>
</ul>
How to place it in one row?
Fiddle
Replace your div with a span, or set the CSS display property to inline or inline-block as below.
<ul class="code__list">
<li class="code__item">
<a class="code__link private" href="#">Test1
<b>
<input type="text" class="intercomInput forCode" name="clientCode" value="1234">
</b>
<div style="display: inline-block">Test2</div>
</a>
</li>
</ul>
Instead of using div you can use span, because div is block element and span is inline, this is why your content is not showing in one line.
Try this:
<ul class="code__list">
<li class="code__item"> <a class="code__link private" href="#">Test1<b><input type="text" class="intercomInput forCode" name="clientCode" value="1234"></b><span>Test2</span></a>
</li>
</ul>
Updated Demo
I have some markup and I would like to know if it is proper to surround <li> tags with <div> tags.
<div class="round3">
<ul>
<div class="top"><li class="winner first"></li></div>
<div class="bottom"><li class="winner last"></li></div>
</ul>
</div><!--end round3-->
Thank you for helping.
No, it is not, the only tags that can go directly inside ul elements are li elements.
You can however, place a div inside a li element if you wish.
<ul>
<li><div>Example</div></li>
</ul>
For more information about HTML lists, see the relevant W3 specification section.
It is not possible.
I propose such correction:
<div class="round3">
<ul>
<li class="winner first top"></li>
<li class="winner last bottom"></li>
</ul>
</div><!--end round3-->
I have something like this:
<ul>
<li>
<div>
<div style="display:inline">
<a><span class="ui-icon ui-icon-circle-plus floatleft "></span></a>
</div>
<input type="checkbox"> <label>good</label>
</div>
</li>
</ul>
the bullet goes above the span on IE8, I would like to make it stay before the span just like in Mozilla, anybody knows how ?
It looks to me as if you have a <div> without an inline style inside the <li> and outside the <div style='display:inline'>
That being so, I would expect the outer div to be formatted as a block rather than being on the same line as the bullet. I'm rather surprised that those other browsers do put it on the same line.