HTML/CSS 标题无法在浏览器中完全显示-6ren

HTML/CSS 标题无法在浏览器中完全显示

转载作者：行者123 更新时间：2023-11-28 18:03:46

25

4

标题部分包含一个标志和一个登录面板，但登录面板在浏览器中只能显示一半(实际上它必须是行，请参阅 HTML)。有什么办法可以调整 CSS 使登录面板完全显示？

HTML

<body>
<!-- begin #header -->
<div class="header">
  <div class="hd-banner">
      <h1>Marryland Learning Center</h1>
  </div>
  <div class="login">
    <form id="loginForm"  action="/" method="post">
    <div class="hd-caption">
      <ul class="hd-login">
        <li>
          <ul>
            <li class="l-column">
            <input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email">
            </li>
            <li class="l-column">
            <input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password">
            </li>
            <li class="l-column">
            <input type="submit" id="signIn" name="signIn" value="Sign in">
            </li>
          </ul>
    </li>
    <li>
          <ul>
            <li class="l-column">
            <input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
            <label>Remember me</label>
            </li>
            <li class="l-column">
          <a href="">Trouble signing in?</a>
                </li>
            <li class="l-column">
                <input type="submit" name="action" value="Register">  
            </li>
          </ul>
        </li>
      </ul>
    </div>
    </form>
  </div>
<!-- end #header --></div>

<div class="nav">
    <ul class="menu">
    <li><a href="">Students</a></li>
    <li><a href="">Teachers</a></li>
    <li><a href="">Training</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Contact Us</a></li>
  </ul>
<!-- end #nav --></div>
</body>

CSS

body 
{
    margin: 0;
    padding: 0; 
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%; /* em best practice, target size ÷ size of content = result */ 
    background-color: rgba(255,255,255,1);
}


/** Header Div **/
/* style .header div: floating the 3-column elements to the left, and giving them width seperately*/
.header 
{
    margin: 0;
    overflow: hidden;  
}

.hd-banner 
{
    float: left;
    width: 50%;
    margin: 0;
    background-color: #FFC;
}


.login
{
    position: relative;
}

.hd-caption
{
    position: absolute;
    top: 30%;
    right: 20px;
}

.hd-login
{
    display: inline-block;
    margin-top: 30px;
    list-style: none;
}

ul
{
    margin: 10px 0;
}

.hd-login li
{
    height: 33px;
    list-style: none;
}

.l-column 
{
    margin-left: 18px;
    overflow: hidden;
    float: left;
}

.state-inp-sign-in
{
    -moz-outline: none;
    outline: none;
    width: 130px;
    height: 28px;
    line-height: 24px;
}

button, input, select, textarea
{
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}


/** Nav Div **/
ul.menu 
{
        list-style-type: none;
        padding: 1em;
        clear: both; /* starts the nav below the floated header */
        overflow:hidden;
        text-align:center;
        background-color:#98bf21;
}

ul.menu li 
{
        display:inline-block;
}

ul.menu li a:link, a:visited 
{
        margin:0 auto;
        display:block;
        width: 120px;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        padding:4px;
        text-decoration:none;
        text-transform:uppercase;
}
ul.menu li a:hover, a:active 
{
        background-color:#7A991A;
}

/** forms styling **/
.sidebar form 
{
    width: 15em;
    border: 1px solid #666;
    border-radius: 10px;
    box-shadow: .2em .2em .5em #999;
    background-color: #d0e9f6;
    padding:1em;
}

.sidebar legend 
{
    text-align: left;
    font-weight: bold;
    font-size: 1.2em;
}

label {
    display: block;
    width: 8em;
    text-align: left;
    color: #04699d; 
}

更新:根据答案更改CSS后，另一个问题是按钮(注册和登录)对齐: enter image description here

最佳答案

问题是双重的:

您正在限制 .hd-login li 的高度，这会切断面板
您的 hd-login 上的 margin-top 将面板推得太低。

删除 .hd-login li 上的高度属性

在 .hd-login 上将 margin-top 属性更改为 -5px

我强烈建议您使 CSS 响应式；就目前而言，如果您减小窗口大小，它会折叠您的窗口，这并不理想。

干杯

关于HTML/CSS 标题无法在浏览器中完全显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19966774/

25

4

0

文章推荐： python - 使用自定义名称将多个 pandas DataFrames 输出到 CSV

文章推荐： iphone - _myObject 与 self.myObject

文章推荐： python - 相对 XPath 错误地选择了循环中的相同元素

文章推荐： ios - 创建更详细的表格单元格

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

首页

博学

6Ren·AI

商城

HTML/CSS 标题无法在浏览器中完全显示