Question

我正在编写一个CSS框架，当涉及到处理按钮时，我正在努力使用户可以对按钮进行分段（这样做，请参阅下面的小提琴） - 但是，我想添加另一个语义CSS选择器，允许用户定位按钮文本的左/右（自动右侧）。然而，我的问题是 - 我不想以任何方式影响HTML，每个其他按钮的HTML结构都是相同的，所以如果可能的话，我宁愿不这样做。

我已经尝试将片段向左移动，之后我认为很明显不起作用 - 按钮的高度也取决于片段的填充 - 所以（据我所知）绝对无法定位。关于如何实现这一点，我有一个心理障碍。

这是我目前的CSS：

.dte.button {
    border-radius: 0;
    display: inline-block;
    border: 0;
    outline: 0;
    padding: 10px;
    background: #34495e;
    color: white;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.25s all;
    position: relative;
}

button.dte.button.segmented {
    padding: 0;
    padding-left: 10px;
    position: relative;
}

.dte.button .segment {
    filter: brightness(50%);
    background: rgba(0, 0, 0, 0.53);
    padding: 10px;
    display: inline-block;
    margin-left: 10px;
}

我的HTML结构

<button class="dte button segmented">
    This should align the segment RIGHT (it does)
    <div class="segment">
        <i class="fa fa-align-right"></i>
    </div>
</button>
<button class="dte button segmented left">
    This should align the segment LEFT(It doesn't)
    <div class="segment">
        <i class="fa fa-align-left"></i>
    </div>
</button>

Fiddle of what I current have.

Answer 1

它不漂亮，但是如果您使用一些负边距修复间距，则可以使用float:left。

例如：

    .dte.button {
        border-radius: 0;
        display: inline-block;
        border: 0;
        outline: 0;
        padding: 10px;
        background: #34495e;
        color: white;
        font-family: 'Roboto', sans-serif;
        text-transform: uppercase;
        cursor: pointer;
        transition: 0.25s all;
        position: relative;
    }

    button.dte.button.segmented {
        padding: 0;
        padding-left: 10px;
        position: relative;
    }

    button.dte.button.segmented.left {
        padding: 10px 10px 10px 0;
    }

    .dte.button .segment {
        filter: brightness(50%);
        background: rgba(0, 0, 0, 0.53);
        padding: 10px;
        display: inline-block;
        margin-left: 10px;
    }

    .dte.button.left .segment {
        float: left;
        margin: -10px 10px -10px 0;
    }

<div style="padding: 20px;">
    <button class="dte button">dte-button</button>
    <button class="dte button segmented">
        Dropdown Button
        <div class="segment">
            ICON
        </div>
    </button>
    <button class="dte button segmented">
        Segment Aligned Right
        <div class="segment">
            ICON
        </div>
    </button>
    <button class="dte button segmented left">
        Segment Aligned Left
        <div class="segment">
            ICON
        </div>
    </button>
</div>

Here also a fiddle.

位置按钮部分正确

1 个答案: