时间戳

首页 > 解决方案 > Div 容器突然显示不正确 - 代码没有变化，是什么原因？

html - Div 容器突然显示不正确 - 代码没有变化，是什么原因？

问题描述

正如标题所说，这里“参与者名字”的 div 容器及其搜索框突然显示得很奇怪。没有代码被触摸/更改等。

这应该是这样的： 在此处输入图像描述

今天突然不知何故，这就是它的样子： 在此处输入图像描述

有趣的是，我在 CodePen 中运行它并且“正确”的外观显示在那里：

https://codepen.io/AYSCodePen/pen/poeQVzv

<!DOCTYPE html>

<div class="mar-bot30">
  <div class="head-l">
    <h2><em>A Y S</em></h2>
  </div>

  <div class="head-r">
    <h2 class="inbl"><em>Plus</em></h2>

    <a class="blueadminbutton" href=".">admin menu</a>
    <a class="dkblueadminbutton mar-right30" href="/">main menu</a>

  </div>

  <br class="clr">

</div>

<hr>

<div class="row text-c">
  <h3>Participant Search</h3>
</div>

<div class="row-third text-l">
  <form method="post">
    <select class="selectform" name="partselect">
      <option value=""> - Participant first name - </option>
      
      <option value="<?php echo $rowd['id']; ?>"><?php echo $rowd['FirstName']; ?> <?php echo $rowd['LastName']; ?></option>
     
    </select>
    <input type="submit" value="search" />
    <input type="hidden" name="partfind" value="partdrop" />
  </form>
</div>

<div class="row-third text-c">
  <form method="post">
    <input type="text" name="partndisnum" maxlength="9" placeholder=" - NDIS number - " />
    <input type="submit" value="search" />
    <input type="hidden" name="partfind" value="partndis" />
  </form>
</div>

<div class="row-third text-r">
  <form method="post">
    <input type="text" name="partname" placeholder=" - part of name - " />
    <input type="submit" value="search" />
    <input type="hidden" name="partfind" value="partname" />
  </form>
</div>


<div class="row-third text-c mar-top30">
  <form method="post">
    <input type="text" name="partid" placeholder=" - id number - " />
    <input type="submit" value="search" />
    <input type="hidden" name="partfind" value="partid" />
  </form>
</div>  

<hr>

有人知道为什么这个特定页面突然变得奇怪了吗？有人遇到过这样奇怪的事情吗？

标签： htmlcss

解决方案

重新创建问题

 <select class="selectform" name="partselect">
          <option value=""> - Participant first name - </option>
          <option value="xyz"> -Some Lengthy text to show up - </option> <!-- added this option -->

在CSS中

.selectform{
 width: calc(100% - 70px); 
}

其中 70px 是按钮的宽度

推荐阅读