问题

我有一个<select>在那里它的一个<option>的文本值是很长.我想要<select>调整大小,因此它永远不会比它的父级宽,即使它必须切断其显示的文本.max-width: 100%应该这样做.

在调整大小之前:

但是,使用a <div>而不是a<fieldset>的等效页面可以正确缩放.如果您在一个页面上拥有a 和a ,并且彼此相邻,则可以更轻松地查看并更改测试更改.如果删除周围的标签,则调整大小有效.该标签在某种程度上导致水平尺寸调整打破.<fieldset><div><fieldset><fieldset>

这些<fieldset>行为就好像有一条CSS规则fieldset { min-width: min-content; }.(min-content粗略地表示不会导致孩子溢出的最小宽度.)如果我<fieldset>用a <div>替换min-width: min-content,它看起来完全一样.然而min-content,我的样式,浏览器默认样式表中没有规则,或者在Firebug的CSS Inspector中可见.我试图覆盖<fieldset>Firebug的CSS Inspector和Firefox的默认样式表forms.css中可见的每个样式,但这没有帮助.特别重写min-width,width也没有做任何事情.

码

字段集的HTML:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section"> …

我有一份国家名单,其中一些名字很长:

<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

默认情况下,选择框与列表中最长的选项一样长.我想创建一个选择框,使其在从宽浏览器窗口查看时显示默认行为,但从狭窄的浏览器窗口查看时,可以很好地适应容器宽度的90%,小于最长选项的长度.

我试过了min-width: 90%;,但没办法.这可以通过CSS样式单独完成吗？

我有一个可变高度,100%-width sub-menu,通常位于页面底部.通过带有小窗口的浏览器查看时,我希望它位于页面顶部.以下是页面的HTML结构:

<div id=container style='height: 500px; background: red;'>
 <div id=content style='width: 100%; background: green;'>content</div>
 <div id=sub-menu style='width: 100%; background: blue;'>sub-menu</div>
</div>

如何sub-menu在不使用CSS阻止页面内容的情况下将变量高度调到顶部？

我有一个表格,下面列出了场地和提交按钮.他们应该在同一条线上,但由于场地列表是动态的,它可能会变得太长并按下按钮.

我在考虑为select设置max-width属性,但我不清楚这是否适用于所有浏览器.您对解决方法有什么建议吗？

<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post"     class="searchform">
    <select name="venue"> 
        <option value="0" selected="selected">Select venue...</option> 
        <option value="1">venue 0</option> 
        <option value="2">club 1</option> 
        <option value="3">disco 2</option> 
        <option value="4">future test venue</option> 
    </select>
    <input type="submit" name="" value="Show venue!" class="submitButton"  />
</form>

CSS:

.searchform select {
max-width: 320px;
}

.searchform input.submitButton {
float: right;
}

当我要选择菜单导航项时,我有一个简单的选择下拉菜单,所以现在当我要悬停在菜单项上时,导航将返回选择打开的选项列表.它发生在所有浏览器中.我不知道这是一个错误还是什么.步骤是:

• 打开选择下拉选项
• 同时将鼠标悬停在导航菜单项上
• 现在导航项目位于选项列表后面(不在选择标记后面)

我试过给位置的z-index.但没有任何工作.我认为这不是问题,但需要解释.任何建议将不胜感激.

这是示例代码:

    <style type="text/css">
/* ####################   Navigation bar CSS styling   ################## */

.mynavbar {
    position: relative;
  width: 100%;
  height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
  margin: 0; border: 0; padding: 0;
  background-color: #666633;
}


a.navbartitle {
  display: block;
  float: left;
  color: white;
  background-color:  #666633;
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 0; border: 0; padding: 0;
  line-height: 23px; /* corresponds to 'top' value of .submenu below */
  text-align: center; …

我已将 dropdwon 定义为 Fellow：

    <div class="form-group">
        <select class="form-control">
            <option>small option</option>
            <option>mediummmmmmmmmmmmmmmmmmmm option</option>                
            <option>large eeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeee eeee option</option>
        </select>
    </div>

我想将select宽度更改为容器宽度和option文本宽度的最小值。如果option文本大于div容器，则截断选项的文本并将省略号放在末尾。所以option留在容器内。还select必须是响应式的，调整窗口大小时，select应更新宽度以适应新的窗口宽度。

如何使用 bootstrap CSS 实现这一点？

尝试了一些与垂直对齐有关的解决方案后,我似乎无法解决这个问题.不确定是否有人可以帮助我.我想要的是将替换文本放在空图像的中间.

这是html代码:

<div class="viewport">
 <a href="#">
  <img src="http://yahoo.com/" alt="no image" />
 </a>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 </div>
</div>

这是css代码:

.viewport {
 background: #bbb;
 width: 350px;
 height: 300px;
 padding: 5px;
}

.viewport img …