පේළිගත / පේළිගත-මූලද්‍රව්‍ය අතර ඇති ඉඩ ඉවත් කරන්නේ කෙසේද?

මෙම HTML සහ CSS ලබා දී ඇත:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

එහි ප්‍රති SP ලයක් ලෙස, SPAN මූලද්‍රව්‍ය අතර පික්සල් 4 ක පළල ඉඩක් ඇත.

නිරූපණය: http://jsfiddle.net/dGHFV/

මෙය සිදුවීමට හේතුව මට වැටහී ඇති අතර, HTML ප්‍රභව කේතයේ ඇති SPAN මූලද්‍රව්‍ය අතර ඇති සුදු අවකාශය ඉවත් කිරීමෙන් මට එම අවකාශයෙන් මිදිය හැකි බව මම දනිමි.

<p>
    <span> Foo </span><span> Bar </span>
</p>

කෙසේ වෙතත්, මම බලාපොරොත්තු වූයේ HTML ප්‍රභව කේතය අවුල් කිරීමට අවශ්‍ය නොවන CSS විසඳුමක් සඳහා ය.

ජාවාස්ක්‍රිප්ට් සමඟ මෙය විසඳන්නේ කෙසේදැයි මම දනිමි - බහාලුම් මූලද්‍රව්‍යයෙන් (ඡේදය) පෙළ නෝඩ් ඉවත් කිරීමෙන්, වැනි:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

නිරූපණය: http://jsfiddle.net/dGHFV/1/

නමුත් මෙම ගැටළුව CSS සමඟ පමණක් විසඳිය හැකිද?

මෙම පිළිතුර තරමක් ජනප්‍රිය වී ඇති බැවින් මම එය සැලකිය යුතු ලෙස නැවත ලියමි.

ඇසූ සත්‍ය ප්‍රශ්නය අමතක නොකරමු:

පේළිගත කිරීමේ මූලද්‍රව්‍ය අතර ඇති ඉඩ ඉවත් කරන්නේ කෙසේද ? මම බලාපොරොත්තු වූයේ HTML ප්‍රභව කේතය අවුල් කිරීමට අවශ්‍ය නොවන CSS විසඳුමක්. CSS සමඟ පමණක් මෙම ගැටළුව විසඳිය හැකිද?

එය වේ CSS මුහුණත් පමණක්, මෙම ගැටලුව විසඳීම සඳහා හැකි, නමුත් කිසිදු ඇත සම්පූර්ණයෙන්ම ශක්තිමත් CSS නිවැරදි කිරීම්.

මගේ මුලික පිළිතුරෙහි මා සතුව තිබූ විසඳුම වූයේ font-size: 0මව් අංගයට එකතු කිරීම සහ පසුව font-sizeදරුවන් පිළිබඳ සංවේදී ප්‍රකාශයක් කිරීමයි.

http://jsfiddle.net/thirtydot/dGHFV/1361/

මෙය සියලුම නවීන බ්‍රව්සර් වල මෑත සංස්කරණ වල ක්‍රියා කරයි. එය IE8 හි ක්‍රියාත්මක වේ. එය සෆාරි 5 හි ක්‍රියා නොකරයි , නමුත් එය සෆාරි 6 හි ක්‍රියාත්මක වේ. සෆාරි 5 මියගිය බ්‍රව්සරයකි ( 0.33%, 2015 අගෝස්තු ).

සාපේක්ෂ අකුරු ප්‍රමාණ සමඟ ඇති විය හැකි ගැටළු බොහොමයක් විසඳීමට සංකීර්ණ නොවේ.

කෙසේ වෙතත්, ඔබට නිශ්චිතවම CSS විසඳුමක් අවශ්‍ය නම් මෙය සාධාරණ විසඳුමක් වන අතර, ඔබේ HTML වෙනස් කිරීමට ඔබට නිදහස තිබේ නම් එය මා නිර්දේශ කරන්නේ නැත (අපගෙන් බොහෝ දෙනෙක් මෙන්).

සාධාරණ පළපුරුදු වෙබ් සංවර්ධකයෙකු ලෙස මම මෙම ගැටලුව විසඳීම සඳහා ඇත්ත වශයෙන්ම කරන්නේ මෙයයි:

<p>
    <span>Foo</span><span>Bar</span>
</p>

ඔව් ඒක නිවැරදියි. මම HTML හි ඇති අවකාශය පේළිගත-බ්ලොක් මූලද්‍රව්‍ය අතර ඉවත් කරමි.

එය පහසුයි. ඒක සරලයි. එය සෑම තැනකම ක්රියා කරයි. එය ප්‍රායෝගික විසඳුමයි.

ඔබ සමහර විට සුදු අවකාශය පැමිණෙන්නේ කොතැනින්දැයි ප්‍රවේශමෙන් සලකා බැලිය යුතුය. ජාවාස්ක්‍රිප්ට් සමඟ තවත් අංගයක් එකතු කිරීමෙන් සුදු අවකාශය එකතු වේද? නැත, ඔබ එය නිසි ලෙස කළහොත් නොවේ.

නව HTML කිහිපයක් සමඟ සුදු අවකාශය ඉවත් කිරීම සඳහා විවිධ ක්‍රමවලින් ඉන්ද්‍රජාලික ගමනක් යමු:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• මම සාමාන්‍යයෙන් කරන ආකාරයට ඔබට මෙය කළ හැකිය:

  <ul>
      <li>Item 1</li><li>Item 2</li><li>Item 3</li>
  </ul>

  http://jsfiddle.net/thirtydot/dGHFV/1362/

• නැතහොත්, මෙය:

  <ul>
      <li>Item 1</li
      ><li>Item 2</li
      ><li>Item 3</li>
  </ul>

• නැතහොත්, අදහස් භාවිතා කරන්න:

  <ul>
      <li>Item 1</li><!--
      --><li>Item 2</li><!--
      --><li>Item 3</li>
  </ul>

• නැතහොත්, ඔබ PHP හෝ ඊට සමාන භාවිතා කරන්නේ නම්:

  <ul>
      <li>Item 1</li><?
      ?><li>Item 2</li><?
      ?><li>Item 3</li>
  </ul>

• නැතහොත්, ඔබට සමහර සංවෘත ටැග් සම්පූර්ණයෙන්ම මඟ හැරිය හැක (සියලුම බ්‍රව්සර් මේ සමඟ හොඳයි):

  <ul>
      <li>Item 1
      <li>Item 2
      <li>Item 3
  </ul>

දැන් මම ගොස් ඔබව තිගැස්සී "සුදු අවකාශය ඉවත් කිරීමට විවිධ ක්‍රම දහසක්, තිස් තිහකින්", ඔබට සියල්ල අමතක වී ඇතැයි සිතිය font-size: 0හැකිය.

විකල්පයක් ලෙස, ඔබ මීට පෙර පේළිගත-බ්ලොක් භාවිතා කර ඇති බොහෝ පිරිසැලසුම් සාක්ෂාත් කර ගැනීමට නම්යශීලී කොටුව භාවිතා කළ හැකිය : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS3 අනුකූල බ්‍රව්සර් සඳහා ඇත white-space-collapsing:discard

බලන්න: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

සංස්කරණය කරන්න:

අද අපි භාවිතා කළ යුත්තේ ෆ්ලෙක්ස්බොක්ස් පමණි .

පැරණි පිළිතුර:

හරි, මම පිළිතුරු font-size: 0;සහ not implemented CSS3 featureපිළිතුරු යන දෙකම ඉහළ නංවා ඇතත් , උත්සාහ කිරීමෙන් පසුව මම දැනගත්තා ඒ කිසිවක් සැබෑ විසඳුමක් නොවන බව .

ඇත්ත වශයෙන්ම, ශක්තිමත් අතුරු ආබාධ නොමැතිව එක් ක්‍රියාමාර්ගයක්වත් නොමැත.

එවිට මම හිස් තැන් ඉවත් කිරීමට තීරණය (මෙම පිළිතුරු මෙම තර්කය ගැන) අතර inline-blockමගේ සිට divs HTMLමූලාශ්රය ( JSPමෙම හැරෙමින්):

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

මේකට

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

එය කැතයි, නමුත් වැඩ කරනවා.

එහෙත්, විනාඩියක් ඉන්න ... මම තුල මගේ divs ජනනය කරනවා නම් කුමක් Taglibs loops( Struts2, JSTL, ආදිය ...)?

උදාහරණයක් වශයෙන්:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

ඒ සියල්ලම පෙළගැස්වීම කිසිසේත් සිතිය නොහැකිය

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

එය කියවිය නොහැකි, තේරුම් ගැනීමට අපහසු සහ තේරුම් ගැනීමට අපහසු ය ...

මා සොයාගත් විසඳුම:

එක් කොටසක අවසානය ඊළඟ එක ආරම්භයට සම්බන්ධ කිරීමට HTML අදහස් භාවිතා කරන්න!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

මේ ආකාරයෙන් ඔබට කියවිය හැකි සහ නිවැරදිව ඇතුළත් කළ කේතයක් ඇත.

ධනාත්මක අතුරු ආබාධයක් ලෙස, HTML sourceහිස් අදහස් දැක්වීමෙන් ආසාදනය වුවද, නිවැරදිව ඉන්ඩෙන්ට් කරනු ඇත;

පළමු උදාහරණය බලමු. මගේ නිහතමානී මතය අනුව, මෙය:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

මෙයට වඩා හොඳයි:

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

සුදු අවකාශයක් නොමැති බවට මූලද්‍රව්‍ය අතර අදහස් එක් කරන්න . අකුරු ප්‍රමාණය බිංදුවට නැවත සකස් කර එය නැවත සැකසීමට වඩා මට පහසුය.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

අවකාශය තුරන් කිරීමේ සියලු ශිල්පීය ක්‍රම display:inline-blockනපුරු හක්ක ...

Flexbox භාවිතා කරන්න

එය නියමයි, මේ සියලු පේළිගත-බ්ලොක් පිරිසැලසුම bs විසඳන අතර 2017 වන විට 98% බ්‍රව්සර් සහාය ඇත (ඔබ පැරණි IE ගැන සැලකිලිමත් නොවන්නේ නම්).

• අපි ෆ්ලෙක්ස්බොක්ස් භාවිතා කිරීමට සූදානම්ද?
• CSS නම්යශීලී පෙට්ටි භාවිතා කිරීම - වෙබ් සංවර්ධක මාර්ගෝපදේශය | එම්.ඩී.එන්
• Flexbox වෙත සම්පූර්ණ මාර්ගෝපදේශයක් | CSS- උපක්‍රම
• නම්‍යශීලී පෙට්ටි - CSS නම්‍යශීලි ක්‍රීඩා පිටිය සහ කේත උත්පාදනය කිරීමේ මෙවලම

display: flex;මව් අංගයට එකතු කරන්න . උපසර්ගයක් සමඟ විසඳුම මෙන්න:

සරල කළ අනුවාදය

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

උපසර්ගය සමඟ නිවැරදි කරන්න

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

අදාළ දේ සම්බන්ධයෙන් මා දුන් පිළිතුර මෙයයි: දර්ශනය: පේළිගත කිරීම - එම අවකාශය කුමක්ද?

ඇත්ත වශයෙන්ම සරල හා අර්ථාන්විත යන දෙවර්ගයටම අවකාශය ඉවත් කිරීමට ඇත්තෙන්ම සරල ක්‍රමයක් තිබේ. එය ශුන්‍ය පළල සහිත අභිරුචි අකුරු ලෙස හැඳින්වෙන අතර, එය ඉතා කුඩා අකුරු භාවිතා කරමින් අකුරු මට්ටමින් සුදු අවකාශය (පේළිගත රේඛා මත ඇති විට පේළිගත කිරීම සඳහා බ්‍රව්සරය විසින් එකතු කරනු ලැබේ). ඔබ අකුරු ප්‍රකාශයට පත් කළ පසු, ඔබ font-familyකන්ටේනරය මත ඇති වෙනස නැවත ළමයින්ට නැවත ලබා දෙන්න, සහ වොයිලා. මෙවැනි:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

රසයට ගැලපේ. මෙන්න මම දැන් ෆොන්ට්-ෆෝර්ජ් වලින් පිසින ලද ෆොන්ට්ස් ඩවුන්ලෝඩ් කර ෆොන්ට්ස්ක්වීරල් වෙබ්ෆොන්ට් ජනක යන්ත්‍රය සමඟ පරිවර්තනය කර ඇත. විනාඩි 5 ක් මට ගත්තා. CSS @font-faceප්‍රකාශය ඇතුළත් කර ඇත: zip ශුන්‍ය පළල අවකාශ අකුරු . එය ගූගල් ඩ්‍රයිව් හි ඇති බැවින් එය ඔබේ පරිගණකයට සුරැකීමට ගොනුව> බාගන්න ක්ලික් කරන්න. ඔබ ප්‍රකාශය ඔබේ ප්‍රධාන CSS ගොනුවට පිටපත් කරන්නේ නම් ඔබට අකුරු මාර්ග වෙනස් කිරීමට අවශ්‍ය වනු ඇත.

CSS පෙළ මොඩියුල මට්ටම 3 මත පදනම් වූ තවත් විකල්ප දෙකක් (ඒ වෙනුවට white-space-collapsing:discardපිරිවිතර කෙටුම්පතෙන් ඉවත් කර ඇත):

• word-spacing: -100%;

න්‍යාය අනුව, එය අවශ්‍ය දේ හරියටම කළ යුතුය - අවකාශයේ අක්‍ෂර පළලෙන් 100% කින් එනම් වචන අතර සුදු අවකාශය කෙටි කරන්න, එනම් බිංදුවට. අවාසනාවකට මෙන්, කොතැනකවත් වැඩ නොකරන බව පෙනේ, මෙම අංගය 'අවදානමක' සලකුණු කර ඇත (එය පිරිවිතරයෙන් ද ඉවත් කළ හැකිය).

• word-spacing: -1ch;

එය '0' ඉලක්කම් පළල අනුව අන්තර් වචන අවකාශය කෙටි කරයි. මොනොස්පේස් අකුරු වර්ගයක එය අභ්‍යවකාශ අක්‍ෂරයේ පළලට හරියටම සමාන විය යුතුය (සහ වෙනත් ඕනෑම අක්‍ෂරයක් ද). මෙය ෆයර්ෆොක්ස් 10+, ක්‍රෝම් 27+, සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9+ හි ක්‍රියා කරයි.

ෆෙඩෙල්

අවාසනාවකට මෙන්, එය 2019 වන අතර white-space-collapseතවමත් ක්‍රියාත්මක නොවේ.

මේ අතර, මව් අංගයක් දෙන්න font-size: 0;සහ සකස් font-sizeදරුවන් මත. මෙය කළ යුත්තේ උපක්‍රමයයි

පැරණි බ්‍රව්සර් සඳහා නම්යශීලී කොටුව භාවිතා කර පසුබෑමක් කරන්න (ඉහත යෝජනා වලින්):

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

සරල:

item {
  display: inline-block;
  margin-right: -0.25em;
}

මව් මූලද්රව්යය ස්පර්ශ කිරීමට අවශ්ය නැත.

මෙහි ඇති එකම කොන්දේසිය: අයිතමයේ අකුරු ප්‍රමාණය නිර්වචනය නොකළ යුතුය (දෙමව්පියන්ගේ අකුරු ප්‍රමාණයට සමාන විය යුතුය).

0.25em පෙරනිමිය වේ word-spacing

W3 පාසල් - වචන පරතරය සහිත දේපල

අකුරු ප්‍රමාණය: 0; කළමනාකරණය කිරීමට ටිකක් උපක්‍රමශීලී විය හැකිය ...

මම හිතන්නේ පහත දැක්වෙන යුවළ රේඛා වෙනත් ක්‍රමවලට වඩා හොඳ සහ නැවත භාවිතා කළ හැකි සහ කාලය ඉතිරි කර ගත හැකි ය. මම මෙය පෞද්ගලිකව භාවිතා කරමි:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

එවිට ඔබට එය පහත පරිදි භාවිතා කළ හැකිය ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

මා දන්නා තරමින් (මම වැරදියි) නමුත් සියලුම බ්‍රව්සර් මෙම ක්‍රමයට සහය දක්වයි.

පැහැදිලි කිරීම :

ඔබ වැඩ කිරීමට අපේක්‍ෂා කරන ආකාරයටම මෙය ක්‍රියාත්මක වේ (සමහර විට -3px වඩා හොඳ විය හැකිය).

• ඔබ කේතය පිටපත් කර අලවන්න (වරක්)
• ඉන්පසු ඔබේ html එකෙහි class="items"එක් එක් පේළියේ බ්ලොක් වල මවුපියන් භාවිතා කරන්න .

ඔබේ නව පේළි වාරණ සඳහා නැවත CSS වෙත ගොස් තවත් CSS රීතියක් එක් කිරීමේ අවශ්‍යතාවයක් ඔබට නැත.

ගැටළු දෙකක් එකවර විසඳීම.

ද සටහන් >* / සියලු දරුවන් පේළිගත-වාරණ විය යුතු බව (විශාල ලකුණ) මෙම මාධ්යයක්.

http://jsfiddle.net/fD5u3/

සටහන: එතුමියකුට ළමා ඔතා ඇති විට අකුරු පරතරය උරුම කර ගැනීම සඳහා මම වෙනස් කර ඇත.

තාක්ෂණික වශයෙන් ප්‍රශ්නයට පිළිතුරක් නොවුවද: "පේළිගත-අවහිර මූලද්‍රව්‍ය අතර ඇති ඉඩ ඉවත් කරන්නේ කෙසේද?"

ඔබට ෆ්ලෙක්ස්බොක්ස් විසඳුම උත්සාහ කර පහත කේතය යොදන්න, එවිට අවකාශය ඉවත් වේ.

p {
   display: flex;
   flex-direction: row;
}

ඔබට මෙම සබැඳියෙන් වැඩි විස්තර දැනගත හැකිය: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ඔබට පරතරයකින් තොරව නිල් පැහැති ස්පා දෙකක් සෑදීමට හෝ වෙනත් සුදු අවකාශයක් හැසිරවීමට අවශ්‍ය දැයි මට විශ්වාස නැත, නමුත් ඔබට පරතරය ඉවත් කිරීමට අවශ්‍ය නම්:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

සහ කර ඇත.

සාමාන්‍යයෙන් අපි මේ වගේ මූලද්‍රව්‍ය විවිධ රේඛාවලින් භාවිතා කරනවා, නමුත් එසේ නම් display:inline-block එකම පේළියේ ටැග් භාවිතා කළහොත් අවකාශය ඉවත් වේ, නමුත් වෙනත් පේළියක එසේ නොවේ.

වෙනත් පේළියක ටැග් සහිත උදාහරණයක්:

p span {
  display: inline-block;
  background: red;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

එකම පේළියේ ටැග් සමඟ උදාහරණය

p span {
  display: inline-block;
  background: red;
}

<p>
  <span> Foo </span><span> Bar </span>
</p>

තවත් කාර්යක්ෂම ක්‍රමයක් වන්නේ CSS රැකියාවකි, එය font-size:0මව් මූලද්‍රව්‍යයට භාවිතා කරන අතර font-sizeඔබට අවශ්‍ය ප්‍රමාණයට ළමා අංගයකට ලබා දේ.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

සමස්ත ක්‍රමවේදය අනුව ඉහත ක්‍රම කොතැනකවත් ක්‍රියා නොකරනු ඇත, නමුත් අවසාන ක්‍රමය මෙම තත්වය සඳහා මෝඩ විසඳුමක් වන අතර ඕනෑම තැනක භාවිතා කළ හැකිය.

මට මේ font-size:0;මොහොතේ මෙම ගැටලුව ඇති අතර ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 හි ගැටලුව පවතින්නේ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් "අකුරු ප්‍රමාණය 0?!?! ඩබ්ලිව්ටීඑෆ් ඔබ පිස්සු මිනිසෙක්ද?" - ඉතින්, මගේ නඩුවේදී මම එරික් මේයර්ගේ CSS යළි පිහිටුවීම සහ font-size:0.01em;ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 සිට ෆයර්ෆොක්ස් 9 දක්වා පික්සල් 1 ක වෙනසක් ඇත, එබැවින් මෙය විසඳුමක් විය හැකි යැයි මම සිතමි.

මෑතකදී මා හා වෙනුවට මව් සැකසීම මෙම ගැටෙමින් තියෙනවා font-size:0මම මව් රුවනයකි තබමින් ස්ථාවර ප්රතිඵල ලබා හිටියේ සාධාරණ අගය කිරීමට දරුවා ආපසු සකසා පසුව, letter-spacing:-.25emකිරීමට පසුව දරුවා ආපසු letter-spacing:normal.

විකල්ප ත්‍රෙඩ් එකක මම දැක්කා font-size:0සෑම විටම පරමාදර්ශී නොවන විවරණකරුවෙකුගේ බ්‍රව්සර්වල අවම අකුරු ප්‍රමාණයන් පාලනය කළ හැකි අතර අකුරු ප්‍රමාණය ශුන්‍යයට සැකසීමේ හැකියාව සම්පූර්ණයෙන්ම ප්‍රතික්ෂේප කරයි.

නිශ්චිතව දක්වා ඇති අකුරු ප්‍රමාණය 100%, 15pt හෝ 36px ද යන්න නොසලකා ems භාවිතා කරන බව පෙනේ.

http://cdpn.io/dKIjo

IE 6/7 පවා සියලුම බ්‍රව්සර් මගින් සහාය දක්වන මේ සඳහා ඉතා සරල / පැරණි ක්‍රමයක් ඇතැයි මම සිතමි. අපට හුදෙක් letter-spacingදෙමව්පියන් තුළ විශාල negative ණාත්මක අගයකට සැකසිය හැකි අතර පසුව එය normalළමා අංග වෙත නැවත සැකසිය හැකිය :

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

මෙම ප්‍රශ්නයට සරලම පිළිතුර වන්නේ එකතු කිරීමයි.

css

float: left;

codepen link: http://jsfiddle.net/dGHFV/3560/

PHP වරහන් සමඟ:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

මෙහි ඇති අනෙක් විසඳුම් ඉතා සංකීර්ණ / ඕනෑවට වඩා වැඩ කරන බව මා විශ්වාස කරන බැවින් මම පරිශීලක 5609829 ගේ පිළිතුර ටිකක් පුළුල් කිරීමට යන්නෙමි. margin-right: -4pxපේළිගත කිරීමේ අංග වලට a යෙදීමෙන් පරතරය ඉවත් වන අතර සියලු බ්‍රව්සර් මඟින් සහාය ලැබේ. යාවත්කාලීන කළ ෆෙඩලය මෙතැනින් බලන්න . Negative ණාත්මක ආන්තිකයන් භාවිතා කිරීමට කැමති අය සඳහා, මෙය කියවීමට උත්සාහ කරන්න .

මෙම CSS පෙළ මොඩියුලය පෙළ 4 පිරිවිතර නිර්වචනය ඉතාtext-space-collapse සැකසෙන මෙම මූලද්රව්යයක් තුල හා අවට ආකාරය සුදු අවකාශය පාලනය කිරීමට ඉඩ දෙන, දේපළ.

එබැවින්, ඔබේ උදාහරණය සම්බන්ධයෙන්, ඔබට මෙය ලිවීමට සිදුවේ:

p {
  text-space-collapse: discard;
}

අවාසනාවකට මෙන්, එච්බීපී පිළිතුරට අදහස් දැක්වීමේදී සඳහන් කර ඇති පරිදි (2016 සැප්තැම්බර් වන විට) කිසිදු බ්‍රව්සරයක් මෙම දේපල ක්‍රියාත්මක නොකරයි .

සියලු බ්‍රව්සර්වල මා වෙනුවෙන් හොඳින් ක්‍රියා කළ පිරිසිදු CSS විසඳුමක් මට හමු විය:

span {
    display: table-cell;
}

white-space: nowrapබහාලුම් අංගයට එකතු කරන්න :

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

මෙන්න ප්ලන්කර් .

වැනි විසඳුම් ගොඩක් තියෙනවා font-size:0, word-spacing, margin-left, letter-spacingහා ඒ නිසා.

සාමාන්යයෙන් මම භාවිතා කිරීමට කැමති letter-spacingනිසා

1. අමතර අවකාශයේ පළලට වඩා විශාල අගයක් අප විසින් පවරන විට එය හරි යැයි පෙනේ (උදා -1em).
2. කෙසේ වෙතත්, එය සමග හරි වනු ඇත word-spacingහා margin-leftඅප වැනි විශාල අගය තබන විට, -1em.
3. font-sizeඅපි ඒකකයක් emලෙස භාවිතා කිරීමට උත්සාහ කරන විට භාවිතා කිරීම පහසු නොවේ font-size.

එබැවින්, letter-spacingහොඳම තේරීම බව පෙනේ.

කෙසේ වෙතත්, මම ඔබට අනතුරු ඇඟවිය යුතුයි

ඔබ භාවිතා කරන විට letter-spacingඔබට වඩාත් හොඳ භාවිතා කර -0.3emහෝ -0.31emඅන් අය නොවේ.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

ඔබ ක්‍රෝම් (පරීක්ෂණ අනුවාදය 66.0.3359.139) හෝ ඔපෙරා (පරීක්ෂණ අනුවාදය 53.0.2907.99) භාවිතා කරන්නේ නම්, ඔබ දකින දේ විය හැකිය:

ඔබ ෆයර්ෆොක්ස් (60.0.2), අයිඊ 10 හෝ එජ් භාවිතා කරන්නේ නම්, ඔබ දකින දේ විය හැකිය:

එය හොඳය. ඉතින්, මම mdn- අකුරු පරතරය පරීක්ෂා කර මෙය සොයා ගතිමි :

දිග

අක්ෂර අතර පෙරනිමි අවකාශයට අමතරව අතිරේක අන්තර්-අක්‍ෂර අවකාශය නියම කරයි. සාරධර්ම negative ණ විය හැකි නමුත් ක්‍රියාත්මක කිරීමේ විශේෂිත සීමාවන් තිබිය හැකිය. පෙළ සාධාරණීකරණය කිරීම සඳහා පරිශීලක නියෝජිතයින් අන්තර් අක්ෂර අවකාශය තවදුරටත් වැඩි කිරීම හෝ අඩු කිරීම නොකළ හැකිය.

හේතුව මෙය බව පෙනේ.

එකතු letter-spacing:-4px;මව් මත pCSS හා එකතු letter-spacing:0px;ඔබේ spanCSS.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

මෙම ප්‍රශ්නයට අළුත් යමක් එකතු කිරීමට මම සිතුවෙමි, දැනට ලබා දී ඇති පිළිතුරු බොහොමයක් ප්‍රමාණවත් හා අදාළ නොවන නමුත්, ඉතා පිරිසිදු නිමැවුමක් ලබා ගත හැකි නව CSS ගුණාංග කිහිපයක් ඇත, සියලු බ්‍රව්සර් හරහා පූර්ණ සහාය ඇතිව සහ සුළු වශයෙන් 'හක්ස්' නැත. මෙය away ත් වන inline-blockනමුත් එය ඔබෙන් ඇසූ ප්‍රශ්නයට සමාන ප්‍රති results ල ලබා දෙයි.

මෙම CSS ගුණාංග වේ grid

IE හැරුණු විට CSS ජාලයට ඉහළ සහයක් ( CanIUse ) අවශ්‍ය වේ-ms- එය ක්‍රියාත්මක වීමට පෙර උපසර්ගයක් වේ.

CSS විදුලිබල පද්ධතියට බෙහෙවින් නම්යශීලී වන අතර, සියලු යහපත් කොටස් ගනී table, flexසහ inline-blockමූලද්රව්ය හා එක් ස්ථානයක් බවට ඔවුන් ගෙන එයි.

A නිර්මාණය කිරීමේදී gridඔබට පේළි සහ තීරු අතර ඇති හිඩැස් නියම කළ හැකිය. පෙරනිමි පරතරය දැනටමත් සකසා ඇති 0pxනමුත් ඔබට මෙම අගය ඔබ කැමති ඕනෑම දෙයකට වෙනස් කළ හැකිය.

එය ටිකක් කෙටි කිරීම සඳහා, අදාළ ක්‍රියාකාරී උදාහරණයක් මෙහි දැක්වේ:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}

<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>

මා සොයාගත් තවත් ක්‍රමයක් නම් පේළියේ පළමු අංගය හැර ආන්තික-වම් negative ණ අගයන් ලෙස යෙදීමයි.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

inline-blockS අතර ඇති අවකාශය ඉවත් කිරීමට උත්සාහ කරන සෑම ප්‍රශ්නයක්ම a ලෙස පෙනේ<table> මට ...

මේ වගේ දෙයක් උත්සාහ කරන්න:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>