A problem arises
Since the html code format, indents or wrap label. Because the browser default processing results in a single element is present in the page display space problem, particularly when the inner row or rows in a block element layout obvious effect
E.g:
Code
Page display
Second, the solution
This problem occurs very stressful, but had to look for the answer unsatisfactory: not a compatibility problem is the need for special handling layout, in short, not very perfect.
My final solution is: to the right side of the line within a block element set css style: margin-left: -4px;
Although this is not fundamentally solve the problem, however: a no compatibility issues, the second will not affect the overall layout
Modified page display
Third, some of the other chiefs of program
1, does not wrap
<div style="border:1px red solid">
<a style="display:inline-block;width:20%;">1111</a><a style="display:inline-block;width:80%;">2222</a> </div>Cons: write code like this, too elegant, and interpretation of the poor. The most important thing is to use a template when I encounter problems such as the waterfall, that are written only one element, and the rest is by looping through the elements added automatically, there is no way to control the line for no change.
2, set to the parent element font-size: 0
drawback: the child element, if desired font, it will need to add fon-size settings in child elements. But if, like me, do not need a picture of text, then it is perfect.
3, no inline-block instead float
float is to ignore whitespace, but you might want to re-CSS layout spend about mind, it may be related to clear the Float like setting.
. 4, word-spacing property
This property is used to set the white space between words, and for the following IE7 hack browsers, word-spacing is defined -1px, to fix the gap 1px stubborn residue and the browser IE7 problem.
Corresponding adjustment should be based on your font size, the value of word-spacing. And compatibility with different browsers is not good, personally I do not recommend this approach. If you hack it, a lot of code to write, I feel a lot of trouble. If you have to use it how else can I do? Of course, choose to forgive you anyway, training and preparation you a reference link: http://demo.doyoe.com/css/inline-block-space/
5, White-Space-Collapse
" CSS3 Text Effects Module ** " in there the "white-space-collapse" property is used to set or retrieve blank characters in the elements it contains. We have the following values:
- collapse: the blank is folded into a series of separate characters (or, in some cases, no characters).
- preserve: to prevent the user agent folding blank, newline reserved for the hard returns.
- preserve-breaks: The value is the "collapse" as folding blank character, but retain the line breaks to force line breaks.
- discard: discard all blank.
Now the property is transferred to the "CSS Text Level 4" in the specification, the "white-space" is divided into two parts: white-space-collapse and text-wrap
So the solution is: white-space-collapse: discard
However, because the property itself, many problems exist, and browser vendors do not timely follow-up and implementation, it is simply impossible. I hope this property shelves quickly friends ~ ~
Gangster program description link https://www.cnblogs.com/cuncunjun/p/7390623.html