Я думаю, что когда вы определяете String
, вы определяете объект. Поэтому вам нужно использовать .equals()
. Когда вы используете примитивные типы данных, вы используете ==
, но с String
(и любым объектом) вы должны использовать .equals()
.
Поскольку этот ответ стал довольно популярным, я его значительно переписываю.
Давайте не будем забывать вопрос, который был задан:
Как удалить пространство между элементами встроенного блока? Я надеялся на решение CSS, которое не требует, чтобы исходный код HTML был подделан. Можно ли решить эту проблему только с помощью CSS?
Это является возможным решить эту проблему только с помощью CSS, но полностью надежные исправления CSS.
Решение, которое у меня было в моем первоначальном ответе, состояло в том, чтобы добавить
font-size: 0
к родительскому элементу, а затем объявить разумныеfont-size
для детей.http://jsfiddle.net/thirtydot/dGHFV/1361/
Это работает в последних версиях всех современных браузеров. Он работает в IE8. Он не работает в Safari 5, но работает в Safari 6. Safari 5 почти мертвый браузер ( 0,33%, август 2015 ).
Большинство возможных проблем с относительными размерами шрифтов затруднительно исправить.
Однако, хотя это разумное решение, если вы специально нуждаетесь в , только исправление CSS, это не что я рекомендую, если вы можете изменить свой HTML-код (как и большинство из нас).
Это то, что я, как опытный веб-разработчик, действительно делаю для решения этой проблемы: / g25]
<p> <span>Foo</span><span>Bar</span> </p>
Да, это так. Я удаляю пробелы в HTML между элементами встроенного блока.
Это легко. Это просто. Он работает повсюду. Это прагматическое решение.
Иногда вам приходится тщательно учитывать, откуда будет проходить пробел. Будет ли добавлен другой элемент с JavaScript, добавьте пробел? Нет, если вы сделаете это правильно.
Давайте продолжим волшебное путешествие по различным способам удаления пробелов, с некоторым новым HTML :
<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>
- Или, используйте комментарии:
<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>
Теперь, когда я ушел и надоел вам до смерти «тысячей разных способов удалить [29] В качестве альтернативы вы теперь можете использовать flexbox для достижения многих макетов, которые вы можете использовать ранее использовали встроенный блок для: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Я немного расскажу о ответе user5609829, так как считаю, что другие решения здесь слишком сложны / слишком много работают. Применение margin-right: -4px
к встроенным блочным элементам приведет к удалению интервала и будет поддерживаться всеми браузерами. См. Обновленную скрипту здесь . Для тех, кто занимается использованием отрицательных полей, попробуйте дать этот прочитанный.
p {
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: red;
font-size: 30px;
color: white;
}
<p>
<span> hello </span>
<span> world </span>
</p>
Спецификация [0] текстового модуля CSS определяет свойство text-space-collapse
, позволяющее управлять тем, как белое пространство внутри и вокруг элемента обрабатывается.
Итак, в отношении ваш пример, вам просто нужно написать это:
p {
text-space-collapse: discard;
}
К сожалению, ни один браузер не реализует это свойство еще (по состоянию на сентябрь 2016 года), как упоминалось в комментариях к ответу HBP .
flex-wrap
, пока, по крайней мере, не будет v28 ( srsly? I>), но до этого момента это идеальное решение.
– indextwo
23 January 2014 в 23:03
Хотя технически это не ответ на вопрос: «Как удалить пространство между элементами встроенного блока?»
Вы можете попробовать решение flexbox и применить код ниже, и пространство будет remove.
p {
display: flex;
flex-direction: row;
}
Вы можете узнать больше об этом по этой ссылке: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
К сожалению, это 2015 год, а white-space-collapse
все еще не реализовано.
Пока давайте родительский элемент font-size: 0;
и установите font-size
для детей. Это должно сделать трюк
размер шрифта: 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) в точности так, как вы ожидали, что он будет работать.
class="items"
в родительском блоке каждого встроенного блока. У вас не будет необходимости вернуться к css и добавить еще одно правило css для ваших новых встроенных блоков.
Решение сразу двух проблем.
Также обратите внимание на >
(больше знака) это означает, что * / все дети должны быть встроенными блоками.
ПРИМЕЧАНИЕ. Я изменил приспосабливаться к наследованию разметки букв, когда оболочка имеет дочернюю оболочку.
-4px
для letter-spacing
, которого может быть недостаточно для больших размеров шрифта , например: см. этот скрипт , мы могли бы использовать большее значение, как в мой пост
– S.Serp
23 January 2017 в 11:52
Хорошо, хотя я уже рассмотрел ответы 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>
, который является уродливым, но работает.
Но подождите минуту ... что, если я создаю свой div внутри 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, чтобы связать конец одного div с началом следующего!
blockquote><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
, хотя и заражены пустым комментарием , приведет к правильному отступу;возьмем первый пример: imho this:
<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>
Надеюсь, что это поможет ...
inline-block
для всех элементов. Это проблема IE7 (и IE7 Emulation mode более новых версий) с inline-block
для "нативного блочного уровня" элементы. Но для этого есть простой способ - display: inline
+ любое свойство, которое запускает «hasLayout» (например, zoom: 1
).
– Ilya Streltsyn
24 July 2013 в 03:32
Самый простой ответ на этот вопрос - добавить.
css
float: left;
codepen link: http://jsfiddle.net/dGHFV/3560/
Для CSS3-совместимых браузеров есть white-space-collapsing:discard
: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space -collapsing
text-space-collapse
:
discard
. Это уже 2016 год и до сих пор не поддерживается.
– Oriol
4 January 2016 в 16:53
<p>A long text...</p>
, где открывающие и закрывающие теги находятся в отдельных строках, чем текстовое содержимое. Это то, что я делаю все время, чтобы мои HTML-файлы были аккуратными и удобочитаемыми.
– Robert Kusznier
16 January 2018 в 12:58
Добавьте display: flex;
к родительскому элементу. Вот решение с префиксом:
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>
Упрощенная версия
Я нашел чистое решение CSS, которое очень хорошо работало для меня во всех браузерах:
span {
display: table-cell;
}
' '
и '0'
. В немоноширинных шрифтах нет никакой подходящей магической пропорции между ширинами символов ' '
и '0'
, поэтому ch
не очень полезно вообще.
– Ilya Streltsyn
13 November 2015 в 13:12
word-spacing
мы могли бы использовать letter-spacing
с произвольным большим отрицательным значением, как показано в , мой ответ
– S.Serp
18 January 2017 в 13:14
Добавить комментарии между элементами, чтобы НЕ иметь пробел. Для меня это проще, чем сбросить размер шрифта до нуля и затем установить его обратно.
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
Я думаю, что для этого есть очень простой / старый метод, который поддерживается всеми браузерами даже IE 6/7. Мы могли бы просто установить letter-spacing
на большое отрицательное значение в родительском, а затем вернуть его к 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>
letter-spacing:normal
во всех дочерних элементах.
– Gaurav Aggarwal
23 January 2017 в 06:49
letter-spacing
составляет 99,99% от времени normal
. размер шрифта не имеет такого фиксированного значения и сильно зависит от дизайна. это может быть маленькое значение или большое значение, основанное на семействе шрифтов и других вещах ... Я никогда не помню, чтобы в моей жизни видеть / использовать специальное значение (отличное от 0 / normal) для letter-spacing
, поэтому я думаю, что это безопаснее и лучше выбирать
– S.Serp
23 January 2017 в 06:58
Просто для удовольствия: простое решение для JavaScript.
document.querySelectorAll('.container').forEach(clear);
function clear(element) {
element.childNodes.forEach(check, element);
}
function check(item) {
if (item.nodeType === 3) this.removeChild(item);
}
span {
display: inline-block;
width: 100px;
background-color: palevioletred;
}
<p class="container">
<span> Foo </span>
<span> Bar </span>
</p>
Я недавно занимался этим вопросом, а вместо того, чтобы установить родительский font-size:0
, а затем вернуть ребёнка к разумному значению, я получаю согласованные результаты, установив родительский контейнер letter-spacing:-.25em
, а потом обратно в letter-spacing:normal
.
В альтернативном потоке я заметил, что комментатор упоминает, что font-size:0
не всегда идеален, потому что люди могут контролировать минимальные размеры шрифтов в своих браузерах, полностью отрицая возможность установки размера шрифта на 0.
Использование ems работает независимо от того, задан ли размер шрифта 100%, 15pt или 36px.
Другим способом, который я нашел, является применение margin-left как отрицательных значений, кроме первого элемента строки.
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-block
s, кажется мне <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>
Существует множество решений, таких как font-size:0
, word-spacing
, margin-left
, letter-spacing
и т. д.
Обычно я предпочитаю использовать letter-spacing
, потому что
-1em
). word-spacing
и margin-left
это будет нехорошо, когда мы устанавливаем большее значение, например -1em
. font-size
неудобно, когда мы пытаемся использовать em
как font-size
. So , letter-spacing
кажется лучшим выбором.
Однако, я должен предупредить вас
, когда вы используете letter-spacing
, вам лучше использовать -0.3em
или -0.31em
not другие.
* {
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>
Если вы используете Chrome (тестовая версия 66.0.3359.139) или Opera (тестовая версия 53.0.2907.99) , вы можете увидеть:
Если вы используете Firefox (60.0.2), IE10 или Edge, то, что вы видите, может быть:
Это интересно. Итак, я проверил mdn-letter-spacing и нашел это:
length
Задает дополнительное межсимвольное пространство в дополнение к умолчанию пространство между символами. Значения могут быть отрицательными, но могут быть ограничения, связанные с реализацией. Пользовательские агенты не могут больше увеличивать или уменьшать межсимвольное пространство, чтобы оправдать текст.
Похоже, что это и есть причина.
Все методы устранения пробелов для display:inline-block
- неприятные хаки ...
Использовать Flexbox
Это потрясающе, решает весь этот встроенный блок макет bs, а с 2017 года поддержка браузера 98% (больше, если вам не нравятся старые IE).
Это тот же ответ, который я дал в связи с этим: Дисплей: встроенный блок. Что это за пространство?
На самом деле есть действительно простой способ удаления пробелов из строки -block, который является простым и семантическим. Он называется настраиваемым шрифтом с пробелами в нулевой ширине, что позволяет сбрасывать пробелы (добавленные браузером для встроенных элементов, когда они находятся на отдельных строках) на уровне шрифта, используя очень маленький шрифт. После того, как вы объявите шрифт, вы просто измените 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;
}
Костюм по вкусу. Вот загрузка шрифта, который я только что приготовил в кузнице шрифтов, и преобразован с помощью генератора web-шрифтов FontSquirrel. Принял меня все 5 минут. Объявление css @font-face
включено: затушеванный пробел ширины пробела . Это на Google Диске, поэтому вам нужно нажать «Файл»> «Загрузить», чтобы сохранить его на своем компьютере. Вероятно, вам придется изменить пути шрифтов, если вы скопируете объявление в основной файл css.
flex-wrap
, пока, по крайней мере, не будет v28 ( srsly? I>), но до этого момента это идеальное решение.
– indextwo
23 January 2014 в 23:03
Я опробовал решение font-size: 0
для аналогичной проблемы в React и Sass для проекта Free Code Camp, над которым я сейчас работаю.
И он работает!
Сначала скрипт:
var ActionBox = React.createClass({
render: function() {
return(
<div id="actionBox">
</div>
);
},
});
var ApplicationGrid = React.createClass({
render: function() {
var row = [];
for(var j=0; j<30; j++){
for(var i=0; i<30; i++){
row.push(<ActionBox />);
}
}
return(
<div id="applicationGrid">
{row}
</div>
);
},
});
var ButtonsAndGrid = React.createClass({
render: function() {
return(
<div>
<div id="buttonsDiv">
</div>
<ApplicationGrid />
</div>
);
},
});
var MyApp = React.createClass({
render: function() {
return(
<div id="mainDiv">
<h1> Game of Life! </h1>
<ButtonsAndGrid />
</div>
);
},
});
ReactDOM.render(
<MyApp />,
document.getElementById('GoL')
);
Затем Sass:
html, body
height: 100%
body
height: 100%
margin: 0
padding: 0
#mainDiv
width: 80%
height: 60%
margin: auto
padding-top: 5px
padding-bottom: 5px
background-color: DeepSkyBlue
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#buttonsDiv
width: 80%
height: 60%
margin: auto
margin-bottom: 0px
padding-top: 5px
padding-bottom: 0px
background-color: grey
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#applicationGrid
width: 65%
height: 50%
padding-top: 0px
margin: auto
font-size: 0
margin-top: 0px
padding-bottom: 5px
background-color: white
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#actionBox
width: 20px
height: 20PX
padding-top: 0px
display: inline-block
margin-top: 0px
padding-bottom: 0px
background-color: lightgrey
text-align: center
border: 2px solid grey
margin-bottom: 0px
' '
и '0'
. В немоноширинных шрифтах нет никакой подходящей магической пропорции между ширинами символов ' '
и '0'
, поэтому ch
не очень полезно вообще.
– Ilya Streltsyn
13 November 2015 в 13:12
word-spacing
мы могли бы использовать letter-spacing
с произвольным большим отрицательным значением, как показано в , мой ответ
– S.Serp
18 January 2017 в 13:14
:(
– Šime Vidas 22 February 2011 в 14:04font-size:0
- это не такая хорошая идея ... – Šime Vidas 1 August 2011 в 21:05