I have a list of span elements inside a div:
<div id="mediaListHolder">
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
</div>
I would like to place numbers in front of span items like it was an ordered list.
Here is the fiddle:
http://jsfiddle.net/nqq3c/2/
Is it possible?
Thank you!
a Div inside a span is not legit HTML. Block elements do not go inside of inline elements.
You can, however set the span to display:list-item -- you'd also need to use list-style-type attribute as described here
Note, I've not actually done this, but it's what would need to happen providing the browser allows it.
Related
<div class="buttonContainer">
<label for="btn_123456">
<span>
<img style="visibility:hidden;">
Text1
</span>
</label>
</div>
<div class="buttonContainer">
<div class="buttonContainer">
<div class="buttonContainer">
To locate the elements for each div element goes like this, //div[#class='buttonContainer'][1] , //div[#class='buttonContainer'][2] and so on.
Text content varies for each div element, under img tag.
How to locate the elements based on it's text content (optimized)?
Answer:
//span[contains(text(),'Text1')] Irrespective of div elements.
try with the xpath like //div[#class='buttonContainer']/label/span[contains(text(),'Text1']
For more specific xpath you can write like
Div[1]/label/span/img for the above example. This way you can write the relative xpath from html/body/......
<div id='test' /><div>
In the above example, I need to find div under below scenario:
WebElement
divelement = driver.FindElement(By.css("#test"));
Now I want to find the div tag with no attribute using the divelement variable.
How to navigate to div descendant using divelement?
There are a couple ways you can do this.
By using a CSS Selector:
driver.findElement(By.cssSelector("#test div"))
// ^ note the space. this is CSS for "descendant".
I'm confused by the phrasing of
find the div tag with no attribute using the divelement variable.
but if you mean a <div> element with no specific attributes, then you can use the :not() pseudo-selector.
driver.findElement(By.cssSelector("#test div:not([id])")
// will find all <div>s that are descendants of #test that do not have an id attribute.
The other way, is to just use chained findElement's like so:
driver.findElement(By.cssSelector("#test")).findElements("div")
divelement.findElement(By.css("div"));
That should be the way to go. That was listed in the comment above from #Sudharsan Selvaraj
If you know the use of double slash // in Xpath and looking for its counterpart in CSS, then you need to use space.
For example: You want CSS for grey line then it will be .image .row.width-for-gray-line
<div class="image parbase wq-GridColumn wq-GridColumn--default--12">
<div class="component">
<div class="row bottom-buffer">
<div class="col-sm-12">
<a href="https://msn.com" target="_blank">
<picture>
<img src="/image/path/cover.jpg"
class="image-max-width-responsive" alt="test_alt_text">
</picture>
</a>
<p class="light-txt">test_caption</p>
</div>
</div>
<div class="row width-for-gray-line">
<hr class="bottom-buffer-gray-line">
</div>
</div>
</div>
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
I mean, If all element is block-level, then there may be more simple to learn. so, why we need this kind of box/element?
Block-level elements cannot be placed next to each other, in contrary to inline and inline-block elements.
Example:
<div style="display:block;width:40px">Up</div>
<div style="display:block;width:40px">Down</div>
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Reft</div>
<div style="display:inline">left</div>
<div style="display:inline">right</div>
If all tags would be treated as block level elements, the following snippet:
<div>This is a link, you can <b>click</b> it.</div>
would look like this in your browser:
The corresponding code:
<div>This is a link, you can <b style="display:block">click</b> it.</div>
Edit: By the way, if there is a need for you to deal with block elements only, just reset the HTML using CSS: * { display:block}
I want to wrap two spans in one line with CSS.
Here is my code:
<div style="width:60px;">
<span id="span1" style="float:left; display:inline;"></span>
<span id="span2" style="float:left; display:inline; "></span>
</div>
But it doesn't work.
How to do that?
Edit:
I want to use the "id", either use div or span, I just want them to be in one line.
When I just use span without style, the content are not in the same line. The second line will go down.
Here is the working example:
<div style="float:left;">
<span style="display:inline; color: red;">First Span</span>
<span style="display:inline; color: blue;">Second Span</span>
</div>
The float will mess things up. Usually with a float to work you need a width with it as well. It can't float them against each other because it doesn't know how much space each span will occupy in relation to the div. Spans are inherently inline elements unless you define them otherwise, so they should just display that way without the float.
<div style="float:left;">
<span style="display:contents; color: red;">First Span</span>
<span style="display:contents; color: blue;">Second Span</span>
</div>
'display:contents' Makes the container disappear, making the child elements children of the element the next level up in the DOM which I believe is the right answer.
Another way which works on ie too is this:
<div style="float:left; display:flex;">
<span style="color: red;">First Span</span>
<span style="color: blue;">Second Span</span>
</div>
In some cases display:inline does not work, in such case try adding both spans in one parent span like below
<span>
<span id="span1">Span 1</span>
<span id="span2">Span 2</span>
</span>
It's the float left that is causing it to be on separate lines. Maybe try a (non breaking space) in between the spans.
Overflow maybe?
<div style="width:60px; overflow:hidden;">
The float and display styles are mutually exclusive, so there's no point using them together. Also <span> defaults to display:inline; so that's redundant anyway (unless you have some other style elsewhere setting them to something else?).
You can use Table.
<table>
<tbody>
<tr>
<td><span>Span 1 text</span></td>
<td><span>Span 2 text</span></td>
</tr>
<tr>
<td><span>Span 3 text</span></td>
<td><span>Span 4 text</span></td>
</tr>
</tbody>
</table>