I'm writing an ordered list. For each element in the list, I'd like to have two lines. One for the name of the item and another for a description of the item.
This is what I'm currently doing:
<ol>
<li>
<ul>
<li>Item one</li>
<li>An explanation of the item.</li>
</ul>
</li>
<li>
<ul>
<li>Item two</li>
<li>An explanation of the item.</li>
</ul>
</li>
</ol>
It seems like a lot to achieve what I was looking for. Does anyone know a quicker way to pull this off?
You may want to use a definition list (<dl>) instead of the inner ul.
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>
How about:
<ol>
<li>
<h3>Item one</h3>
<p>An explanation of the item.</p>
</li>
<li>
<h3>Item two</h3>
<p>An explanation of the item.</p>
</li>
</ol>
(Replace <h3> with the appropriate level heading in that context in the document — or, if you’re using HTML5, wrap the <ol> in a <section> tag, and use <h1> in place of <h3>.)
Or do you really need an ordered list? If not, the definition list is the thing:
<dl>
<dt>Item one</dt>
<dd>An explanation of the item.</dd>
<dt>Item two</dt>
<dd>An explanation of the item.</dd>
</dl>
Related
Is there a way to remove the empty space from just before list (where the blue line is on the picture)? I would be very grateful is somebody could help me with this.
<p class="has-text-align-justify"><b>List:</b>
<ul>
<li> Text1</li>
<li> Text2</li>
<li> Text3</li></ul>
</p>
How it looks
<p class="has-text-align-justify"><b>List:</b>
<ul style="margin-top:-10px;">
<li> Text1</li>
<li> Text2</li>
<li> Text3</li>
</ul>
</p>
Sorry. Forgot to add the changes
Assume that following HTML snippet exists somewhere in the <body> element of a web page:
<div id="root_1000" class="root bacon">
<ul>
<li id="item_1234567" class="active">
<div class="userpost author_4281">
<div>This text should be visible.<div>
</div>
<ul><li>Some item</li></ul>
</li>
</ul>
</div>
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
<div>
</div>
<ul><li>Another item</li></ul>
</li>
</ul>
</div>
<div id="root_3000" class="root bacon">
<ul>
<li id="item_7654321" class="active">
<div class="userpost author_9877">
<div>This text should be visible.<div>
</div>
<ul><li>Yet another item</li></ul>
</li>
</ul>
</div>
So here's my question: what would the XPath syntax be to select the div.root that contains info posted by author #3333 (i.e. div[class~="author_3333"])?
The following XPath statement will properly match the div.userpost element associated with author #3333 that I want to hide, but does not include the <ul><li>Another item</li></ul> node, which I also need to hide:
.//div[contains(#class, 'author_3333')]
What I want to do is select the closest div.root ancestor associated with the node that my XPath statement matches. Any help would be greatly appreciated... thanks in advance!
you need to get the parent node that has the second div as its child, something like:
//div[.//div[contains(#class, "author_3333")]]
You can use this XPath expression:
.//div[contains(#class, 'author_3333')]/ancestor::div[contains(#class,'root')][1]
Output is:
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
</div>
</div>
<ul>
<li>Another item</li>
</ul>
</li>
</ul>
</div>
please help me i cant make my drop down list vertical. when I hover over a list it is horizontal.
my html code
<div id="header">
<div>
<img src="logo.png" alt="LOGO" height="115" width="115px" />
<ul id="navigation">
<li class="active">
Home
</li>
<li>
What We Offer
</li>
<li>
Solutions
<ul>
<li>
Inbound
</li>
<li>
Outbound
</li>
</ul>
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
css
I can't see your CSS, but did you apply display: inline to both the top-level AND sub-level menu items? This will cause the problem you describe.
The top-level li items should be display: inline, but their children should be display: block.
See this example: https://jsfiddle.net/tLqrrfy0/
I have document
<ul class="section">
<li>
<ul class="section">
<li><span>world</span></li>
</ul>
<span>hello</span>
</li>
<li><span>!</span></li>
</ul>
I want to select li on first level, and i have xpath expression:
//ul[#class="section"]/li
But it selects all li.
One way to do that can be: ul[#class="section" and not(parent::li)]/li
Chrome, IE8, Safari, and Opera all act the way I would expect, but Firefox is turning this...
<a class="header" href="a_link.html">
<ul class="header">
<li class="price">$17,880</li>
<li class="year">2006</li>
<li class="make">Honda</li>
<li class="model">Civic</li>
</ul>
</a>
...into this...
<ul class="header">
<li class="price">$17,880</li>
<li class="year">2006</li>
<li class="make">Honda</li>
<li class="model">Civic</li>
</ul>
Has anyone seen this before?
Cheers
#dialer is correct. But just a supplementary note: using a doctype of html should fix this - it will turn the page into html 5 standards which allows the use of anchors in this way.
This may be undesirable for other reasons, but thought I'd mention it!