标签: positioning
如何用CSS控制字段集的定位？
我有以下代码：
<fieldset>
<legend>
<strong>Personal Information</strong>
</legend>
<ul>
<li>
<label for="first_name">First Name</label><br />
<input type="text" id="first_name" name="first_name" value="" maxlength="30" />
</li>
...
</ul>
</fieldset>
<fieldset>
<legend>
<strong>Car Information</strong>
</legend>
<ul>
<li>
<label for="car_make">Make</label><br />
<input type="text" id="car_make" name="car_make" value="" maxlength="30" />
</li>
...
</ul>
</fieldset>
现在，所有内容都位于左侧，第二个字段集（汽车信息）位于第一个字段集（个人信息）的正下方。
我希望汽车信息字段集位于个人信息字段集的右侧，以便它们并排。使用CSS，我该如何做到这一点？
推荐指数
解决办法
查看次数
css定位表彼此相邻
使用下面的 HTML/CSS 我有 3 个表。我希望表 1 和表 2 在“同一行”上彼此相邻，表 3 在下面，但它们之间有一个中断。
但是，当我在前两个表上使用 float:left/right 时，表 3 总是直接在下面并“接触”表 1/2？
我试过边距/清除/浮动，但似乎无法使事情对齐:(
感激地收到任何帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
DIV.search
{
width: 80%;
margin-right: auto;
margin-left: auto;
}
DIV.search TABLE
{
border: 1px solid black;
border-collapse: separate;
}
DIV.search TABLE.table1
{
float: left;
width: 45%;
}
DIV.search TABLE.table2
{
float: right;
width: 45%;
}
TABLE.table3
{
border: 1px solid black;
margin-top: 50px;
margin-right: auto;
margin-left: …推荐指数
解决办法
查看次数
控制graphviz（dot2tex）中节点的布局？
我是 graphviz 的新手，只是想知道如何确定图中的相对节点定位。例如，如果我想绘制一个简单的三角形“abc”，节点“a”在顶部，节点“b”和“c”在底部的同一层，我应该如何告诉graphviz布局根据需要节点？
我尝试了以下方法：
graph G
{
node [shape="circle"];
edge [lblstyle="auto"];
{rank=min; "a"}
a -- b [label = "-"];
a -- c [label = "-"];
{rank=same; "b" "c"}
b -- c [label = "+"];
}
但输出将节点 'a' 和 'b' 置于顶部的同一级别，节点 'c' 位于底部。
此外，是否可以在同一个图形中并排绘制两个这样的三角形（中间有一个合适的空间）？如果是，它是如何实施的？
非常感谢。
推荐指数
解决办法
查看次数
垂直居中 <a> 标签？
我正在努力将元素中的标记垂直居中。
我有的是这样的：
http://jsbin.com/arudif/2/edit
<style>
header {padding: 20px 0 20px 0; clear: both;}
header a {
float: right;
vertical-align: middle;
margin: auto 0 auto 0;
}
//This is what I tried, doesnt work
</style>
<header>
<a href="#">Center Me Please!</a>
<p> Stack Overflow </p>
</header>
我只是想不出 auto ho 来修复标题中的那个标签
推荐指数
解决办法
查看次数
浮动容器重叠底部div,但不是顶部
嘿,我对这个结构有点不确定.基本上我想要一个有4个div.
<div class="container">
<div class="top-border"></div>
<div class="box"></div>
<div class="bottom-border"></div>
</div>
容器装有三个较小的div.我的目标是让盒子div保持内容,并且边框divs在盒子周围创建一个括号.边框顶部将浮动到左侧,边框底部将浮动到右侧.唯一的问题是容器与底部支架重叠,但不与顶部重叠.我也不希望它重叠......有没有办法解决这个问题？
这是一个JsFiddle:http://jsfiddle.net/6ghzN/
推荐指数
解决办法
查看次数
在基本图像上放置 <div> 标记并允许调整大小的最佳方法是什么？
我有一个underlay.jpg <div id=underlay>中，我想在上面精确放置标记。做这个的最好方式是什么？
我希望图像填充 div 的空间，并在调整窗口大小时调整标记。我假设在 CSS 中做这件事是最简单的，但我不确定。
顺便说一下，我正在使用 Javascript 生成标记 div。这是我当前的代码，当我调整大小时无法正确调整：
<div id="underlay">
<img style="height:auto; width:auto; max-width:100%;" src="underlay.jpg">
<div id="markers">
<div id="marker1" style="left:36%; top:56%; position:absolute;">"1"</div>
<div id="marker2" style="left:45%; top:76%; position:absolute;">"2"</div>
<div id="marker3" style="left:24%; top:65%; position:absolute;">"3"</div>
</div>
</div>
推荐指数
解决办法
查看次数
Plotly-Dash 中元素的定位
我制作了一个基本的仪表板，如下所示，本文底部附有工作的最小示例。我想（但不知道如何）将滑块和（当前硬编码为 500 像素）居中放置大约 80% 的图形宽度，以响应浏览器窗口大小。我怎样才能做到这一点？谢谢！
[元信息：我很感激有关在哪里寻找/如何搜索此类主题的建议；我似乎在谷歌上搜索错误的东西，并且很难将 Dash 文档的各个部分放在一起] [
] 1
import dash
import dash_table
import dash_daq as daq
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np
# pydata stack
import pandas as pd
from sqlalchemy import create_engine
def makeplot(slider):
gobar=[go.Bar(
x=[1,2,3],
y=[1,slider,5],
name='I am {}'.format(slider)) ]
content= {
'data':gobar,
'layout':dict(title='Mygraph')
}
return content
## layout
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
## app
app.layout …推荐指数
解决办法
查看次数
最简单的jquery让div"position:fixed"到右下角(总是......就像向下滚动一样)？
您好,我对jquery比较新,但我喜欢它,想知道我是否可以在页面的右下角放置一个div ,这样即使我们向下滚动页面,它的位置仍然固定在那里.此后,我需要通过div中的图像将链接传递给页面中的特定锚点.它应该简短.
推荐指数
解决办法
查看次数
如果对话框的父级具有固定位置,则jQuery模式对话框将由overlay div隐藏
我的一个jQuery对话框是在一个具有固定位置(页脚)的div中定义的.当打开一个模态jQuery对话框时,jQuery会创建一个覆盖整个页面的覆盖div,然后将对话框打开,其顶部的z-index比覆盖div高.遗憾的是,在具有固定位置的div内渲染的任何对话框都被覆盖div覆盖,尽管要打开的模态对话框具有比覆盖本身更大的z-index.
我为了解决问题而减少的以下HTML代码显示了非固定位置div和固定位置div内的对话框之间的区别:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/themes/sam/theme.css?ln=primefaces&amp;v=2.2.1" />
<link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&v=2.2.1" />
<title>CSS TEST</title><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=2.2.1"></script><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces&v=2.2.1"></script>
<script>
/*<![CDATA[*/
jQuery(function() {
jQuery("#dialog1").dialog({
autoOpen: false,
modal: true
});
jQuery("#dialog2").dialog({
autoOpen: false,
modal: true
});
});
/*]]>*/
</script>
</head>
<body>
<div style="z-index: 1; position: static;" onclick="jQuery('#dialog1').dialog('open')">
position: static; /* default */
<div id="dialog1" title="Dialog1"></div>
</div>
<div style="z-index: 1; position: fixed; left: 100px; top: 100px" onclick="jQuery('#dialog2').dialog('open')">
position: fixed; …推荐指数
解决办法
查看次数
如何将无序的浮动项目列表集中到页面中
如果我有一个无序列表,例如
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Service</a></li>
<li><a href="index.html">Blog</a></li>
</ul>
使用CSS很好地对齐它们,例如
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
line-height: 50px;
margin-left: 5px;
margin-right: 5px;
}
ul li a {
display: block;
height: 46px;
padding-left: 5px;
padding-right: 5px;
}
然后我如何将<ul>元素与页面中心对齐,请记住没有为任何元素指定宽度？
首选答案将与ie6 +兼容
任何帮助赞赏.
贾伊
推荐指数
解决办法
查看次数