对齐问题和引导按钮修改

【问题标题】：Alignment issue and bootstrap button modification对齐问题和引导按钮修改
【发布时间】：2022-01-25 02:36:58
【问题描述】：

您好，我有一个定制设计要制作：

当前的实现看起来像：

如何使用 css 制作第一个名为 manedlig 捐赠和 enkel 捐赠的按钮以使用该箭头指针？我也无法进行相同的水平对齐，而且它们看起来没有对齐

我的代码是：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- jQuery UI autocomplete CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
        integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

    <style>
        /* Overriding Styles */
        .radio-toolbar {
            margin: 10px 0px;
        }

        .radio-toolbar input[type="radio"] {
            opacity: 0;
            /* position: fixed; */
            width: 0;
        }

        .radio-toolbar label {
            display: inline-block;
            background-color: white;
            padding: 5px 22px;
            font-family: sans-serif, Arial;
            font-size: 16px;
            border: 1px solid #E7E7E7;
            border-radius: 0px;
        }

        .radio-toolbar label:hover {
            background-color: #E7E7E7;
        }

        /* .radio-toolbar input[type="radio"]:focus+label {
            border: 2px dashed #444;
        } */

        .radio-toolbar input[type="radio"]:checked+label {
            background-color: #C8951C;
            color: white;
            border: none;
        }

        #basic-addon2 {
            background-color: white;
        }

        input[type="text"] {
            text-align: center;
        }

        #amount::placeholder {

            /* Firefox, Chrome, Opera */
            text-align: center;
            margin-left: 20px !important;
        }

        input {
            border-radius: 0
        }

        .custom-btn {
            position: relative;
            display: inline-block;
            width: auto;
            height: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            min-width: 150px;
        }

        .custom-btn span {
            position: relative;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            transition: 0.3s;
        }

        .custom-btn-2::before {
            background-color: #C8951C;
            transition: 0.3s ease-out;
        }

        .custom-btn-2 span {
            color: #C8951C;
            border: 1px solid #C8951C;
            transition: 0.2s;
        }

        .custom-btn-2 span:hover {
            color: rgb(255, 255, 255);
            background-color: #C8951C;
            transition: 0.2s 0.1s;
        }

        .custom-btn.hover-opacity::before {
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
        }

        .custom-btn.hover-opacity:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body style="background-color: #fbf9f7;">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                <form id="form_submit">
                    <div class="radio-toolbar mb-5">
                        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
                        <label for="monthly">Månedlig donation</label>

                        <input type="radio" id="one-time" name="frekvens" value="one-time">
                        <label for="one-time">Enkel donation</label>
                    </div>
                    <div class="radio-toolbar" id="monthly-donation-block">
                        <input type="radio" id="amount-29" name="monthly-belob" value="29">
                        <label for="amount-29">29 DKK</label>

                        <input type="radio" id="amount-49" name="monthly-belob" value="49" checked>
                        <label for="amount-49">49 DKK</label>

                        <input type="radio" id="amount-79" name="monthly-belob" value="79">
                        <label for="amount-79">79 DKK</label>
                    </div>
                    <div class="radio-toolbar" id="one-time-donation-block" style="display: none;">
                        <input type="radio" id="amount-99" name="one-time-belob" value="99">
                        <label for="amount-99">99 DKK</label>

                        <input type="radio" id="amount-149" name="one-time-belob" value="149" checked>
                        <label for="amount-149">149 DKK</label>

                        <input type="radio" id="amount-199" name="one-time-belob" value="199">
                        <label for="amount-199">199 DKK</label>
                    </div>
                    <div class="input-group mb-5">
                        <input type="text" class="form-control num-only auto-ok" id="belob" placeholder="Valgfrit beløb"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">DKK</span>
                        <div id="belob-feedback" class="invalid-feedback">
                            Incorrect Number
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control num-only" id="phone" placeholder="Telefonnummer" required
                            maxlength="10">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="custom-btn custom-btn-2 hover-opacity">
                            <span>FORTSÆT</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<!-- These two are required unless jQuery & bootstrap is already included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
    integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
    crossorigin="anonymous"></script>
<!-- This is required for autocomplete api -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdn.dataforsyningen.dk/dawa/assets/dawa-autocomplete2/1.0.2/dawa-autocomplete2.min.js"></script>
<!-- this is required for debounce delay of input field -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
    integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
    integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ=="
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16/dist/sweetalert2.all.min.js"></script>
</html>

请帮忙！字体类型可以忽略

【问题讨论】：

    标签： html css twitter-bootstrap bootstrap-4


    【解决方案1】：

    您可以添加::after 来创建指针

          .radio-toolbar input[type="radio"]:checked+label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(
45deg);
      }

    也可以通过容器上的 flex 属性实现对齐：

    在此处查看完整代码：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- jQuery UI autocomplete CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
        integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

    <style>
        /* Overriding Styles */
        .radio-toolbar {
          margin: 10px 0px;
          display: flex;
        }

        .radio-toolbar input[type="radio"] {
            opacity: 0;
            /* position: fixed; */
            width: 0;
        }

        .radio-toolbar label {
            display: inline-block;
            background-color: white;
            padding: 5px 22px;
            font-family: sans-serif, Arial;
            font-size: 16px;
            border: 1px solid #E7E7E7;
            border-radius: 0px;
            flex:1;
            margin-right: 8px;
        }
      
      .radio-toolbar label:last-child {
        margin-right: 0;
      }

        .radio-toolbar label:hover {
            background-color: #E7E7E7;
        }

        /* .radio-toolbar input[type="radio"]:focus+label {
            border: 2px dashed #444;
        } */

        .radio-toolbar input[type="radio"]:checked+label {
            background-color: #C8951C;
            color: white;
            border: none;
            position: relative;
        }

      .radio-toolbar input[type="radio"]:checked+label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(
45deg);
      }
      
     
        #basic-addon2 {
            background-color: white;
        }

        input[type="text"] {
            text-align: center;
        }

        #belob::placeholder {

            /* Firefox, Chrome, Opera */
            margin-left: -58px !important;
        }

        input {
            border-radius: 0
        }

        .custom-btn {
            position: relative;
            display: inline-block;
            width: auto;
            height: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            min-width: 150px;
padding: 0px;
        }

        .custom-btn span {
            position: relative;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            transition: 0.3s;
        }

        .custom-btn-2::before {
            background-color: #C8951C;
            transition: 0.3s ease-out;
        }

        .custom-btn-2 span {
            color: #C8951C;
            border: 1px solid #C8951C;
            transition: 0.2s;
        }

        .custom-btn-2 span:hover {
            color: rgb(255, 255, 255);
            background-color: #C8951C;
            transition: 0.2s 0.1s;
        }

        .custom-btn.hover-opacity::before {
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
        }

        .custom-btn.hover-opacity:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body style="background-color: #fbf9f7;">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                <form id="form_submit">
                    <div class="radio-toolbar mb-5">
                        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
                        <label for="monthly" class="with-pointer">Månedlig donation</label>

                        <input type="radio" id="one-time" name="frekvens" value="one-time">
                        <label for="one-time" class="with-pointer">Enkel donation</label>
                    </div>
                    <div class="radio-toolbar" id="monthly-donation-block">
                        <input type="radio" id="amount-29" name="monthly-belob" value="29">
                        <label for="amount-29">29 DKK</label>

                        <input type="radio" id="amount-49" name="monthly-belob" value="49" checked>
                        <label for="amount-49">49 DKK</label>

                        <input type="radio" id="amount-79" name="monthly-belob" value="79">
                        <label for="amount-79">79 DKK</label>
                    </div>
                    <div class="radio-toolbar" id="one-time-donation-block" style="display: none;">
                        <input type="radio" id="amount-99" name="one-time-belob" value="99">
                        <label for="amount-99">99 DKK</label>

                        <input type="radio" id="amount-149" name="one-time-belob" value="149" checked>
                        <label for="amount-149">149 DKK</label>

                        <input type="radio" id="amount-199" name="one-time-belob" value="199">
                        <label for="amount-199">199 DKK</label>
                    </div>
                    <div class="input-group mb-5">
                        <input type="text" class="form-control num-only auto-ok" id="belob" placeholder="Valgfrit beløb"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">DKK</span>
                        <div id="belob-feedback" class="invalid-feedback">
                            Incorrect Number
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control num-only" id="phone" placeholder="Telefonnummer" required
                            maxlength="10">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="custom-btn custom-btn-2 hover-opacity">
                            <span>FORTSÆT</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<!-- These two are required unless jQuery & bootstrap is already included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
    integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
    crossorigin="anonymous"></script>
<!-- This is required for autocomplete api -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdn.dataforsyningen.dk/dawa/assets/dawa-autocomplete2/1.0.2/dawa-autocomplete2.min.js"></script>
<!-- this is required for debounce delay of input field -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
    integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
    integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ=="
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16/dist/sweetalert2.all.min.js"></script>
</html>

    【讨论】：

    • “FORTSÆT”按钮左右两边的小边距怎么办？
    • @ShihabUllah 似乎只是主题/助推器添加的东西，可以使用 .custom-btn 删除。查看更新
    • 谢谢@Yichaoz！ :)
    • 是否有任何方法可以将金额字段的占位符值与占位符值“telefonnummer”对齐？我已将它居中对齐，但我想让它更靠左或居中对齐占位符值“telefonnummer”
    • 由于有一个DKK（货币）被抵消，您可以抵消金额占位符以补偿相同宽度的货币。但我不得不说它真的很hacky，理想情况下你希望所有东西都对齐输入的左侧
    【解决方案2】：

    对于指针箭头，您可以使用 CSS 边框：

    button {position:relative; padding:10px; background:orange; color:#fff; border:none;}
button:before {
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    width: 0;
    height: 0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:15px solid orange;
}
    &lt;button&gt;Button&lt;/button&gt;

    我不确定你在说什么“水平对齐”？

    【讨论】：

    • 通过水平对齐我的意思是我的自定义单选按钮被挤压并且不占用整行，我希望每个行元素在左侧或右侧具有相等的边距。请看这张图片：imgur.com/nvVjeeD
    • 我也使用单选按钮，你可以在代码中看到。如何为单选按钮应用您的 CSS？
    • 在你的情况下使用我的CSS作为.radio-toolbar label。
    【解决方案3】：

    对于这些要求，可能有很多解决方案。我为按钮设计做了一个部分示例。你可以去看看。

    样式

        /* Overriding Styles */
.radio-toolbar {
  margin: 10px 0px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  /* position: fixed; */
  width: 0;
}

.radio-toolbar label {
  display: inline-block;
  background-color: white;
  padding: 5px 22px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 1px solid #E7E7E7;
  border-radius: 0px;
  position: relative;
  z-index: 5;
}

.radio-toolbar label:hover {
  background-color: #E7E7E7;
}

/* .radio-toolbar input[type="radio"]:focus+label {
border: 2px dashed #444;
} */

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #C8951C;
  color: white;
  border: none;
}
.btn-color{
  display: flex;
  justify-content: center;
}
.arrow{
  position: absolute;
  width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #c8951c;
  z-index: 0;
}
    <div class="radio-toolbar mb-5">
  <div class="row">
    <div class="btn-color">
        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
        <label for="monthly" class="button-month">
          Månedlig donation
        </label>
        <span class="arrow"></span>
    </div>
  </div>
</div>

    https://codepen.io/njmsaikat/pen/gOXYzBe

    【讨论】：

      猜你喜欢
      • 2017-07-24
      • 2016-05-16
      • 2023-04-07
      • 1970-01-01
      • 2015-12-01
      • 2013-09-27
      • 2017-02-19
      • 2016-09-16
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode