css 如何制作两个形状相同的盒子？

uujelgoq 于 2023-04-08 发布在其他

关注(0)|答案(3)|浏览(213)

我有这样的HTML代码：

<html>

<body>

  <form style='display:flex; flex-direction: row; justify-content: center; align-items: center' action=''>
    <input type='text' id='frmDate' value=aaa name='frmDate' style='text-align:center; width: 150px;font-size: 10px; border-color: black; height: 45px; display: block;' readonly/>
    <label for='frmDate'>&nbsp;&nbsp;&nbsp;title</label> &nbsp;&nbsp;
    <select name='frmDate2' id='frmDate2' style='text-align:right; height: 45px; width: 150px;font-size: 10px; border-color: black; display: block;'>
      <option selected='selected'>a</option>
      <option>aa</option>
      <option>aa</option>
    </select>
    <label for='frmDate2'>&nbsp;&nbsp;title2</label>
    <br><br><br>
  </form>

</body>

</html>

两个盒子的形状不一样，我怎么才能让它们看起来像彼此呢？我想让两个盒子看起来形状一样

css

来源：https://stackoverflow.com/questions/72112273/how-to-make-two-boxes-with-the-same-shape

3条答案

按热度按时间

nnsrf1az1#

您需要设置相同的border-width to both elements。
由于margin的标准行为，输入字段较高，如果您将box-sizing: border-box设置为它，则两个元素将具有相同的高度。

select {
  border: 2px solid black
}

input,
select {
  box-sizing: border-box;
}

<form style='display:flex; flex-direction: row; justify-content: center; align-items: center' action=''>
  <input type='text' id='frmDate' value=aaa name='frmDate' style='text-align:center; width: 150px;font-size: 10px; border-color: black; height: 45px; display: block;' readonly/>
  <label for='frmDate'>&nbsp;&nbsp;&nbsp;title</label> &nbsp;&nbsp;
  <select name='frmDate2' id='frmDate2' style='text-align:right; height: 45px; width: 150px;font-size: 10px; border-color: black; display: block;'>
    <option selected='selected'>a</option>
    <option>aa</option>
    <option>aa</option>
  </select>
  <label for='frmDate2'>&nbsp;&nbsp;title2</label>
  <br><br><br>
</form>

赞(0）回复(0）举报 2023-04-08

xn1cxnb42#

最简单的方法是避免使用内联样式，切换到样式表（或<style>元素），然后一起定义它们的属性;一旦这样做了，它们看起来几乎相同（记住，你已经选择了不同的文本对齐方式，<input>的center和<select>的right）。确保它们看起来相同的最后一部分是为border定义样式，以覆盖<select>的默认边框样式：

/* generic, minimal reset to ensure all elements have the same
   base styles to reduce cross-browser differences: */
*,
::before,
::after {
  box-sizing: border-box;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
  /* this is added simply to move the <form> away from
     the top/left edge to more clearly see the borders
     of the child-elements: */
  margin-block: 1em;
  margin-inline: auto;
  gap: 0.5em;
}

/* all common styles for the elements declared together: */
input,
select {
  width: 150px;
  height: 45px;
  /* once the border was styled, to override the default
     styling of the <select> element, they look alike: */
  border-color: black;
  border-style: solid;
}

/* to allow for the specific element styles, in your
   case the text-alignment: */
input {
  text-align: center;
}

select {
  text-align: right;
}

<form action=''>
  <input type='text' id='frmDate' value=aaa name='frmDate' readonly/>
  <label for='frmDate'>title</label>
  <select name='frmDate2' id='frmDate2'>
    <option selected='selected'>a</option>
    <option>aa</option>
    <option>aa</option>
  </select>
  <label for='frmDate2'>title2</label>
</form>

赞(0）回复(0）举报 2023-04-08

gojuced73#

你的其他属性是好的。为了边界的一致性，你可以添加border和border-radius到你的样式中

border-radius: 0.2rem; /*Round 4 border corners with 0.2rem*/
border: 1px solid black; /*Make your element borders consistent*/

<html>

  <body>

    <form style='display:flex; flex-direction: row; justify-content: center; align-items: center' action=''>
      <input type='text' id='frmDate' value=aaa name='frmDate' style='text-align:center; width: 150px;font-size: 10px; border-radius: 0.2rem; border: 1px solid black; height: 45px; display: block;' readonly />
      <label for='frmDate'>&nbsp;&nbsp;&nbsp;title</label> &nbsp;&nbsp;
      <select name='frmDate2' id='frmDate2' style='text-align:right; height: 45px; width: 150px;font-size: 10px; border-radius: 0.2rem; border: 1px solid black; display: block;'>
        <option selected='selected'>a</option>
        <option>aa</option>
        <option>aa</option>
      </select>
      <label for='frmDate2'>&nbsp;&nbsp;title2</label>
      <br><br><br>
    </form>

  </body>

</html>

为了减少样式重复并提高代码可读性，可以向元素添加classes。
此外，我们不应该使用 作为间距，我建议你应该使用padding或margin，这将使你的代码更有效。

<html>

<head>
  <style>
    .form {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center
    }
    
    .input-field {
      width: 150px;
      font-size: 10px;
      border-radius: 0.2rem;
      border: 1px solid black;
      height: 45px;
      display: block;
    }
    
    .right-text-align {
       text-align: right;
    }
    
    .center-text-align {
       text-align: left;
    }
    
    .label {
      padding: 0.5rem;
    }
  </style>
</head>

<body>

  <form class="form" action=''>
    <input type='text' id='frmDate' value=aaa name='frmDate' class="input-field center-text-align" readonly />
    <label for='frmDate' class="label">title</label>
    <select name='frmDate2' id='frmDate2' class="input-field right-text-align">
      <option selected='selected'>a</option>
      <option>aa</option>
      <option>aa</option>
    </select>
    <label for='frmDate2' class="label">title2</label>
    <br><br><br>
  </form>

</body>

</html>

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何制作两个形状相同的盒子？

3条答案

相关问题

热门标签

最新问答