Как делают я *действительно* выравниваю по ширине горизонтальное меню в HTML+CSS?
Вот несколько функций, которые я написал, чтобы получить файл в формате json, который можно легко передать:
//takes an array of JavaScript File objects
function getFiles(files) {
return Promise.all(files.map(file => getFile(file)));
}
//take a single JavaScript File object
function getFile(file) {
var reader = new FileReader();
return new Promise((resolve, reject) => {
reader.onerror = () => { reader.abort(); reject(new Error("Error parsing file"));}
reader.onload = function () {
//This will result in an array that will be recognized by C#.NET WebApi as a byte[]
let bytes = Array.from(new Uint8Array(this.result));
//if you want the base64encoded file you would use the below line:
let base64StringFile = btoa(bytes.map((item) => String.fromCharCode(item)).join(""));
//Resolve the promise with your custom file structure
resolve({
bytes: bytes,
base64StringFile: base64StringFile,
fileName: file.name,
fileType: file.type
});
}
reader.readAsArrayBuffer(file);
});
}
//using the functions with your file:
file = document.querySelector('#files > input[type="file"]').files[0]
getFile(file).then((customJsonFile) => {
//customJsonFile is your newly constructed file.
console.log(customJsonFile);
});
//if you are in an environment where async/await is supported
files = document.querySelector('#files > input[type="file"]').files
let customJsonFiles = await getFiles(files);
//customJsonFiles is an array of your custom files
console.log(customJsonFiles);
6 ответов
Сделать его <p> с text-align: justify?
Обновление : Nevermind. Это не работает вообще, как я думал.
Обновление 2 : не работает ни в каких браузерах кроме IE прямо сейчас, но CSS3 имеет поддержку этого в форме text-align-last
Для Основанных на гекконе браузеров я предложил это решение. Это решение не работает с браузерами WebKit, хотя (например, Хром, Midori, Крещение), они все еще показывают конечный пробел после последнего объекта.
я поместил строку меню в выровненный по ширине абзац . Проблема состоит в том, что последняя строка выровненного абзаца не будет представлена выровненная по ширине по очевидным причинам. Поэтому я добавляю широкий невидимый элемент (например, img), который гарантирует, что абзац является по крайней мере двумя строками долго.
Теперь строка меню выравнивается по ширине тем же алгоритмом использование браузера для того, чтобы выровнять простой текст.
Код:
<div style="width:500px; background:#eee;">
<p style="text-align:justify">
<a href="#">THE MENU ITEMS</a>
<a href="#">SHOULD BE</a>
<a href="#">JUSTIFIED</a>
<a href="#">JUST AS</a>
<a href="#">PLAIN TEXT</a>
<a href="#">WOULD BE</a>
<img src="/Content/Img/stackoverflow-logo-250.png" width="400" height="0"/>
</p>
<p>There's an varying number of text-only menu items and the page layout is fluid.</p>
<p>The first menu item should be left-aligned, the last menu item should be right-aligned. The remaining items should be spread optimal on the menu bar.</p>
<p>The number is varying,so there's no chance to pre-calculate the optimal widths.</p>
<p>Note that a TABLE won't work here as well:</p>
<ul>
<li>If you center all TDs, the first and the last item aren't aligned correctly.</li>
<li>If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.</li>
</ul>
</div>
Комментарий: Вы замечаете, что я обманул? Для добавления элемента заполнителя пространства я должен высказать некоторое предположение о ширине строки меню. Таким образом, это решение не полностью снижается к правилам.
Я знаю, что исходный вопрос определил HTML + CSS, но это конкретно не сказало никакой javascript;)
Попытка сохранить css и разметку максимально чистыми, и максимально семантически значимыми для (использование UL для меню) я придумал это предложение. Вероятно, не идеальный, но это может быть хорошая начальная точка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kind-of-justified horizontal menu</title>
<style type="text/css">
ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
display: block;
float: left;
text-align: center;
}
</style>
<script type="text/javascript">
setMenu = function() {
var items = document.getElementById("nav").getElementsByTagName("li");
var newwidth = 100 / items.length;
for(var i = 0; i < items.length; i++) {
items[i].style.width = newwidth + "%";
}
}
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">first item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">last item</a></li>
</ul>
<script type="text/javascript">
setMenu();
</script>
</body>
</html>
Самое простое, что можно сделать, - это заставить строку разрываться, вставив в конец строки элемент, который будет занимать больше, чем оставшееся доступное пространство, а затем скрыть его. Я довольно легко справился с этим с помощью простого элемента span , например:
#menu {text-align: justify; } #menu * {display: inline; } #menu li {display: inline-block; } #menu span {display: inline-block; положение: относительное; ширина: 100%; высота: 0; } Все мусор внутри селектора #menu span (насколько я обнаружил) необходим для удовлетворения большинства браузеров. Он должен принудительно установить ширину элемента span на 100%, что должно вызвать разрыв строки, поскольку он считается встроенным элементом из-за правила display: inline-block . inline-block также делает возможным span для правил стиля уровня блока, таких как width , что приводит к тому, что элемент не помещается в соответствие с меню и, следовательно, меню к разрыву строки.
Разумеется, вам необходимо настроить ширину диапазона в соответствии с вашим вариантом использования и дизайном, но я надеюсь, что вы поняли общую идею и сможете ее адаптировать.
Есть решение. Работает в FF, IE6, IE7, Webkit и т. Д.
Убедитесь, что вы не добавили пробелов перед закрытием span.inner . IE6 сломается.
Вы можете дополнительно указать .outer ширину
.outer {text-align: justify; } .outer span.finish {дисплей: встроенный блок; ширина: 100%; } .outer span.inner {дисплей: встроенный блок; белое пространство: nowrap; } ЭЛЕМЕНТЫ МЕНЮ ДОЛЖНЫ БЫТЬ ОБОСНОВАННЫЕ ТОЛЬКО КАК ОБЫЧНЫЙ ТЕКСТ БУДЕТ БЫТЬ если идти с javascript то можно (этот скрипт основан на mootools)
<script type="text/javascript">//<![CDATA[
window.addEvent('load', function(){
var mncontainer = $('main-menu');
var mncw = mncontainer.getSize().size.x;
var mnul = mncontainer.getFirst();//UL
var mnuw = mnul.getSize().size.x;
var wdif = mncw - mnuw;
var list = mnul.getChildren(); //get all list items
//get the remained width (which can be positive or negative)
//and devided by number of list item and also take out the precision
var liwd = Math.floor(wdif/list.length);
var selw, mwd=mncw, tliw=0;
list.each(function(el){
var elw = el.getSize().size.x;
if(elw < mwd){ mwd = elw; selw = el;}
el.setStyle('width', elw+liwd);
tliw += el.getSize().size.x;
});
var rwidth = mncw-tliw;//get the remain width and set it to item which has smallest width
if(rwidth>0){
elw = selw.getSize().size.x;
selw.setStyle('width', elw+rwidth);
}
});
//]]>
</script>
и css
<style type="text/css">
#main-menu{
padding-top:41px;
width:100%;
overflow:hidden;
position:relative;
}
ul.menu_tab{
padding-top:1px;
height:38px;
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
ul.menu_tab li{
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
ul.menu_tab li.item7{
margin-right:0;
}
ul.menu_tab li a, ul.menu_tab li a:visited{
display:block;
color:#006A71;
font-weight:700;
text-decoration:none;
padding:0 0 0 10px;
}
ul.menu_tab li a span{
display:block;
padding:12px 10px 8px 0;
}
ul.menu_tab li.active a, ul.menu_tab li a:hover{
background:url("../images/bg-menutab.gif") repeat-x left top;
color:#999999;
}
ul.menu_tab li.active a span,ul.menu_tab li.active a.visited span, ul.menu_tab li a:hover span{
background:url("../images/bg-menutab.gif") repeat-x right top;
color:#999999;
}
</style>
и последний html
<div id="main-menu">
<ul class="menu_tab">
<li class="item1"><a href="#"><span>Home</span></a></li>
<li class="item2"><a href="#"><span>The Project</span></a></li>
<li class="item3"><a href="#"><span>About Grants</span></a></li>
<li class="item4"><a href="#"><span>Partners</span></a></li>
<li class="item5"><a href="#"><span>Resources</span></a></li>
<li class="item6"><a href="#"><span>News</span></a></li>
<li class="item7"><a href="#"><span>Contact</span></a></li>
</ul>
</div>