文本和按钮并排

Question

我正在尝试 trim 我的文本和文本附近，应该有一个按钮....但两者必须在同一行中。这是我的：

.wpcc-banner.wpcc-bottom {
    left: 0;
    right: 0;
    bottom: 0;
}

.wpcc-banner .wpcc-message {
    display: block;
    flex: 1 1 auto;
    margin-right: 1em;
    max-width: 100%;
}
span.wpcc-message {
    text-align: center;
}

.wpcc-color-custom-1621853993.wpcc-container {
    background-color: rgb(34, 34, 34);
    border-color: rgb(230, 179, 179);
    color: rgb(255, 255, 255);
}
.wpcc-container {
    border-style: solid;
    border-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5em;
    overflow: hidden;
    position: fixed;
    transition: opacity 1s ease;
    z-index: 9999;
}
.wpcc-btn {
    display: block;
    font-size: .9em;
    font-weight: 700;
    padding: .4em .8em;
    text-align: center;
    white-space: nowrap;
}
.wpcc-btn, .wpcc-privacy {
    cursor: pointer;
}

<div class="wpcc-container">
    <span class="wpcc-message">This website uses cookies to improve your experience.
      <a class="wpcc-privacy" href="#" rel="noopener" target="_blank">Read more</a>
        </span>
        <div class="wpcc-compliance">
      <a class="wpcc-btn" tabindex="0">ACCEPT</a>
        </div>
</div>

在 https://codepen.io/mike991/pen/LYyryLX 也可用，但我需要同一行的文本和按钮，并且按钮必须可见。

如何实现？

Answer 1

您使用过“flex: 1 1 auto;”对于“.wpcc-banner .wpcc-message”，它使文本占据没有按钮的任何 space。删除该行并添加“justify-content: center;”到“.wpcc-容器”。

Answer 2

如果您需要与按钮对齐的文字，则选择以下选项之一：

将与 .wpcc-btn 相同的填充添加到：span.wpcc-message

        
        .wpcc-banner.wpcc-bottom {
            left: 0;
            right: 0;
            bottom: 0;
        }
        
        .wpcc-banner .wpcc-message {
            display: block;
            flex: 1 1 auto;
            margin-right: 1em;
            max-width: 100%;
        }
        span.wpcc-message {
            text-align: center;
            padding: .4em 0;
        }
        
        .wpcc-color-custom-1621853993.wpcc-container {
            background-color: rgb(34, 34, 34);
            border-color: rgb(230, 179, 179);
            color: rgb(255, 255, 255);
        }
        .wpcc-container {
            border-style: solid;
            border-width: 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: nowrap;
            font-family: inherit;
            font-size: 16px;
            line-height: 1.5em;
            overflow: hidden;
            position: fixed;
            transition: opacity 1s ease;
            z-index: 9999;
        }
        .wpcc-btn {
            display: block;
            font-size: .9em;
            font-weight: 700;
            padding: .4em .8em;
            text-align: center;
            white-space: nowrap;
        }
        .wpcc-btn, .wpcc-privacy {
            cursor: pointer;
        }

<div class="wpcc-container">
        <span class="wpcc-message">This website uses cookies to improve your experience.
            <a class="wpcc-privacy" href="#" rel="noopener" target="_blank">Read more</a>
        </span>
        <div class="wpcc-compliance">
            <a class="wpcc-btn" tabindex="0">ACCEPT</a>
        </div>
</div>

文本和按钮并排

Text and button side by side

html

css

button