文章/答案/技术大牛

发布

社区首页 >问答首页 >简单的HTML / CSS问题(表单/选择器)

问简单的HTML / CSS问题(表单/选择器)
EN

Stack Overflow用户

提问于 2022-09-25 22:09:04

回答 2查看 53关注 0票数 2

我的工作方式，虽然是一个初学者HTML和CSS教程，我无法得到我的“T恤尺寸”选择器在同一条线上的选择。

我真的很想有人帮我做这件事。我需要能够得到t恤尺寸选择在同一行与我的下拉列表时，在全屏时，使它看起来很好！

下面是我要找的结果：

我得到的结果如下：

这是我的CSS代码：

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #5D6063;
  background-color: #EAEDF0;
  font-family: "Helvecta", "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.3;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.speaker-form-header {
  text-align: center;
  background-color: #F6F7F8;
  border: 1px solid #D6D9DC;
  border-radius: 3px;

  width: 80%;
  margin: 40px 0;
  padding: 50px;
}

.speaker-form-header h1 {
  font-size: 30px;
  margin-bottom: 20px;
}

.speaker-form {
  background-color: #F6F7F8;
  border: 1px solid #D6D9DC;
  border-radius: 3px;

  width: 80%;
  padding: 50px;
  margin: 0 0 40px 0;
}

.form-row {
  margin-bottom: 40px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
}

.form-row input[type='text'],
.form-row input[type='email']{
  background-color: #FFFFFF;
  border: 1px solid #D6D9DC;
  border-radius: 3px;
  width: 100%;
  padding: 7px;
  font-size: 14px;
}

.form-row label {
  margin-bottom: 15px;
}

@media only screen and (min-width: 700px) {
  .speaker-form-header,
  .speaker-form {
    width: 600px;
  }
  .form-row {
    flex-direction: row;
    align-items: flex-start; /* To avoid stretching */
    margin-bottom: 20px;
  }
  .form-row input[type='text'],
  .form-row input[type='email'],
  .form-row select,
  .form-row textarea {
    width: 250px;
    height: initial;

  }
  .form-row label {
    text-align: right;
    width: 120px;
    margin-top: 7px;
    padding-right: 20px;
  }

  .legacy-form-row {
    margin-bottom: 10px;
  }

  .legacy-form-row legend {
    width: 120px;
    text-align: right;
    padding-right: 20px;
  }

  .legacy-form-row legend {
    float: left;
  }
}

.form-row input[type='text']:invalid,
.form-row input[type='email']:invalid {
  border: 1px solid #D55C5F;
  color: #D55C5F;
  box-shadow: none; /* Remove default red glow in Firefox */
}

.legacy-form-row {
  border: none;
  margin-bottom: 40px;
}

.legacy-form-row legend {
  margin-bottom: 15px;
}

.legacy-form-row .radio-label {
  display: block;
  font-size: 14px;
  padding: 0 20px 0 10px;
}

.legacy-form-row input[type='radio'] {
  margin-top: 2px;
}

.legacy-form-row .radio-label,
.legacy-form-row input[type='radio'] {
  float: left;
}

.form-row select {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  float: right;
}

和html

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'/>
    <title>Speaker Submission</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>

  <body>
    <header class='speaker-form-header'>


      <h1>Speaker Submission</h1>
      <p><em>Want to speak at our fake conference? Fill out this form!</em></p>

    </header>

      <form action='' method='get' class='speaker-form'>
        <div class='form-row'>
          <label for='full-name'>Name</label>
          <input id='full-name' name='full-name' type='text'/>
        </div>

          <div class='form-row'>
            <label for='email'>Email</label>
            <input id='email'
                   name='email'
                   type='email'
                   placeholder='joe@example.com'/>
          </div>

          <fieldset class='legacy-form-row'>
            <legend>Type of Talk</legend>
            <input id='talk-type-1'
                   name='talk-type'
                   type='radio'
                   value='main-stage' />
            <label for='talk-type1' class='radio-label'>Main Stage</label>

            <input id='talk-type-2'
                   name='talk-type'
                   type='radio'
                   value='workshop'
                   checked />
            <label for='talk-type-2' class='radio-label'>Workshop</label>
        </fieldset>

        <div class='form-row'>
          <label for='t-shirt'>T-Shirt Size</label>
          <select id='t-shirt' name='t-shirt'>
            <option value='xs'>Extra Small</option>
            <option value='s'>Small</option>
            <option value='m'>Medium</option>
            <option value='l'>Large</option>
          </select>
        </div>


      </form>


  </body>
</html>

html

css

回答 2

Stack Overflow用户

发布于 2022-09-25 22:41:40

您的.form-row select样式有width: 100%;，它使select元素填充父div的整个宽度。所以你只需要删除这一行：

.form-row select {
  /* remove the following line */
  /* width: 100%; */
  padding: 5px;
  font-size: 14px;
  float: right;
}

JS Fiddle：https://jsfiddle.net/cr2oj1zt/1/

票数 3

Stack Overflow用户

发布于 2022-09-26 01:16:43

这是因为您设置宽度值等于100%。它将占用您的div容器的空间。如果不希望它等于div宽度，则必须为select元素指定值。例如：

.form-row select {
  width: 30%; /* or other value you want apply for the select element */
  padding: 5px;
  font-size: 14px;
  float: right;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73848149

复制

相似问题

问简单的HTML / CSS问题(表单/选择器)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的HTML / CSS问题(表单/选择器)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的HTML / CSS问题(表单/选择器)
EN