问题
I was creating something more complex than the code snippet bellow, until I encountered a bug.
If you click on the textfield, then hit Tab, the textfield and its' siblings move way over to the left side.
What is causing this, and how can I stop it from happening?
(The reason there are so many unnecessary divs, is because as I said before, this is from a much more complex project. I narrowed it down to the following.)
解决方法
You're tabbing to the next element: the image.
If you hit SHIFT-TAB (reverse tab function in Windows), you'll end up back in the input.
The effect is caused by child elements being larger than their containers. If you switch the overflowing elements from width: 940px to width: 100%, the shifting effect is removed.
tabindex
With the tabindex attribute you can control the tabbing order.
Elements with a positive value are navigated first, in chronological order
Elements that don't support tabindex or have a value of 0 tab next, in HTML source order
Elements with a negative value (e.g. tabindex="-1") cannot receive focus via tabbing