Question

在下面的代码段中，我有一个按钮栏小部件，它应该允许按钮和非按钮成为子按钮。但是，非按钮选项（选项3）相对于其他选项偏移了垂直像素。

发生了什么？

（包含的CSS有一些冗余/覆盖条目，因为它是从SASS生成的。）

＆＃13;

.button-bar {
    border: 0.1rem solid #d5d5d5;
    align-items: baseline;
    border-radius: 0.2rem;
    display: inline-flex;
    height: 5rem;
    padding: 0;
}

.button-bar > *:not(:last-child) {
    border-right: thin solid #d5d5d5;
}

.button-bar > * {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 1.6rem;
    line-height: 2.5rem;
    letter-spacing: normal;
    font-weight: normal;
    border: 0.1rem solid #d5d5d5;
    border-radius: 0.2rem;
    color: #424242;
    font-weight: normal;
    background-color: #f1f1f1;
    box-sizing: border-box;
    cursor: default;
    height: 5rem;
    margin: 0.5rem;
    padding: 0 3rem;
    text-decoration: none;
    user-select: none;
    width: auto;
    background-color: #fff;
    border: 0;
    color: #5e6062;
    height: 100%;
    margin: 0;
    max-height: 100%;
    white-space: nowrap;
}


.button-bar > *:focus {
    z-index: 1;
}

＆＃13;

<div class="button-bar">
    <button>Option 1</button>
    <button aria-selected="true">Option 2</button>
    <div class="btn" tabindex="0">Option 3</div>
    <input type="button" value="Option 4">
</div>

＆＃13;

Answer 1

Console.WriteLine("What Colour would you like your {0:C} to be?\n Black \n Brown\n White\n or mixed?", player);中的div的字体不同。

尝试将Console.WriteLine($"What Colour would you like your {player:C} to be?\n Black \n Brown\n White\n or mixed?");添加到button-bar。

按钮样式div的放置与按钮的放置不同

1 个答案: