Flexbox - контроль пространство между пролетом и текстом

Question

У меня есть два типа кнопок:

1. Кнопки где span первый ребенок
2. Кнопка где span является последним ребенком

I 'd хотел бы управлять пространством между диапазоном и текстом - без добавления большего количества HTML или классов. Является ли это возможным?

Использование псевдоселекторов :first-child или :last-child не будет работать, потому что span всегда является первым и последним ребенком.

button { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
}

<button> 
 
    <span>X</span> 
 
    Remove 
 
</button> 
 

 
<button> 
 
    Remove 
 
    <span>X</span> 
 
</button>

Редактировать: Чтобы быть ясно, я только хочу, чтобы контролировать пространство между текстом и размахом. Итак, когда пролет сначала, должен быть правильный запас. Когда последний пробел, он должен быть левым.

Редактировать 2: И я хотел бы сохранить flexbox из-за гибкости.

Answer 1

Вы можете сделать это, добавив:

// Span last child 
span:before { 
    content: ''; 
    display: inline-block; 
    margin-right: 10px; 
} 

// Span first child 
span:after { 
    content: ''; 
    display: inline-block; 
    margin-left: 10px; 
} 

К вашим First-child-span оу тип Last-child-span кнопку. Не добавляя класс к этим двум типам кнопок, я не думаю, что это было бы возможно.

EDIT:

button { 
 
    display: inline-block; 
 
} 
 
span { 
 
    display: inline-block; 
 
}

<button> 
 
    <span>X</span> 
 
    Remove 
 
</button> 
 

 
<button> 
 
    Remove 
 
    <span>X</span> 
 
</button> 
 
<button> 
 
    Remove 
 
    <span>X</span> 
 
</button>

Answer 2

Ok поэтому проблема с вопросом является то, что невозможно с критериями вы установили. Вы пытаетесь стилизовать элементы по-разному, которые точно совпадают с точки зрения css. Обе версии «всего лишь <span/> внутри <button/>, тот факт, что внутри кнопки есть текст и что он расположен до/после того, как интервал не влияет на какие-либо правила CSS.

Вы либо получите очень негибкое решение (например, выбирая каждый элемент вручную, используя nth-child() или что-то похожее). Или вам придется изменить свою разметку. Для изменения вашей разметки вы либо добавляете классы в промежутки, либо обтекаете текст в элементе (например, p). Как это будет работать с классами довольно straightfoward, путем оборачивания текста вы можете использовать first-child и last-child псевдо-селекторы правильно, вот так

button { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
} 
 

 
span:first-child{ 
 
    margin-right:20px; 
 
} 
 

 
span:last-child{ 
 
    margin-left:20px; 
 
}

<button> 
 
    <span>X</span> 
 
    <p>Remove</p> 
 
</button> 
 

 
<button> 
 
    <p>Remove</p> 
 
    <span>X</span> 
 
</button> 
 

 
<button> 
 
    <span>X</span> 
 
    <p>Remove</p> 
 
</button> 
 

 
<button> 
 
    <p>Remove</p> 
 
    <span>X</span> 
 
</button>