如何在此HTML代码中实现我想要做的事情 [英] How do I achieve what I'm trying to do in this HTML code

问题描述

我正在尝试将字段设置为正确的宽度，在我创建的这种接触形式中，字段是药丸形状（左侧和右侧），我希望左侧固定为宽度字段内的文本，但在右侧我希望它固定为6列的宽度，无论字段内的任何文本。



我尝试了什么：



我尝试过使用列宽，编辑span，div等我已附上代码用这个例子说，有人可以帮忙吗？如果我的解释不那么好的话，我也可以发一个如何查看的截图！



测试字段 - HTML [ ^ ]

I'm trying to set the fields to the correct width, in this contact form I am creating, the fields are in pill shapes (left and right side), I would like the left side to be fixed to the width of the text which is inside the field, however on the right side I would like it to be fixed to the width of 6 columns regardless of any text which is inside the field.

What I have tried:

I've tried using column widths, editing the span, div etc. I have attached the code pen with the example, could somebody help please? I can also send a screenshot of how I want it to look if my explanation isn't that good!

Test Fields - HTML[^]

推荐答案

我只是在这里重写

/* pill box start */

风格

我添加了一些风格并在css中删除了一些风格

请添加这些行可能会得到你想要的结果

style here
I added some style and removed some style in css
Please add these lines may be you will get result want to you want

.pill-green .pill-box-left {
    background-color: #367782;
    color: white;
    border: none;
    height: 32px;
    display: inline-block;
    float: left;
    width: 110px;
        padding: 0 5px;
}
.pill-box-right {
    background-color: #fff;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: 0;
    padding-left: 4px;
    color: white;
    width: calc(100% - 124px);
    display: inline-block;
    float: right;
    height: 32px;
}
.pill-box {
    line-height: 30px;
    border: 1px solid #000;
    margin-bottom: 20px;
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
    border-radius: 2px;
}
.pill-green .pill-box-left {
    background-color: #367782;
    color: white;
    border: none;
    height: 32px;
    display: inline-block;
    float: left;
    width: 110px;
}
.pill-box-right {
    background-color: #fff;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: 0;
    padding-left: 4px;
    color: white;
    width: calc(100% - 124px);
    display: inline-block;
    float: right;
    height: 32px;
}

这篇关于如何在此HTML代码中实现我想要做的事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！