Как увеличить строку поиска?

Это код, который у меня есть до сих пор, и я хочу знать, как сделать панель поиска подходящей для панели навигации. Помогите, пожалуйста и жаль, что я не очень хорош в кодировании, это для класса информационных технологий, который я принимаю.Как увеличить строку поиска?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #8A1414; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 30px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #111; 
} 

</style> 
</head> 
<body> 

<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">Movies</a></li> 
    <li><a href="#contact">TV</a></li> 
    <li><a href="#about">About</a></li> 
    <input id="search-bar" name="search" type="text" placeholder="Search..."> 
    <input id="search-button" name="search_submit" type="submit" value="Search"> 
</ul> 
</body>

источник

2016-05-09 Selina Delgado

Ваш HTML недействителен. У вас может быть только 'li', как дети' ul'. ** Подтвердите свой код! ** –

Является ли это то, что вы хотите Помещенный в коде CSS это:?

input#search-bar { 
margin-top: 10px; 
}

источник

2016-05-09 15:50:06

Ваш HTML является недействительным. Вы можете иметь только li в качестве детей от ul

Так что нам нужно внести некоторые изменения.

Я хотел бы предложить что-то вроде:

Берем поиска входов из ul, где они не принадлежат. Оберните их в свой собственный div и поплавайте вправо.

Оберните весь участок (ul и найдите div) в элементе nav.

Введите search ввод в display:inline-block, затем примените любую ширину, которую хотите.

Codepen Demo

nav { 
 
    background-color: #8A1414; 
 
    overflow: hidden; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 30px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
} 
 
.search { 
 
    float: right; 
 
    padding: 14px 0; 
 
} 
 
.search #search-bar { 
 
    display: inline-block; 
 
    width: 100px; 
 
    /* your width here */ 
 
    /* 100px for SO Snippet only */ 
 
}

<nav> 
 
    <ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">Movies</a> 
 
    </li> 
 
    <li><a href="#contact">TV</a> 
 
    </li> 
 
    <li><a href="#about">About</a> 
 
    </li> 
 

 
    </ul> 
 
    <div class="search"> 
 
    <input id="search-bar" name="search" type="text" placeholder="Search..."> 
 
    <input id="search-button" name="search_submit" type="submit" value="Search"> 
 
    </div> 
 
</nav>

источник

2016-05-09 15:55:00

Если вы хотите установить увеличить ширину положить это в теге CSS/стиль

#search-bar{ width: 300px }

Вы можете настроить значения в соответствии с вашим Preferance ,

Если вы хотите правильно настроить панель поиска в макете, я могу предложить следующие свойства, а также вы можете настроить их значения.

#search-bar{ 
      width: 300px; 
      height: 20px; 
      margin-top: 10px; 
      margin-left: 600px; 
      }

Вы должны посетить веб-сайт школы w3c для лучшего понимания CSS и HTML.

источник

2016-05-09 15:59:22 Rusty

Вы также можете использовать Floats, но это зависит от вашего уровня понимания. – Rusty

Как увеличить строку поиска?

ответ

Смежные вопросы